How to change view in Knockout JS

Question

i have a short question. I am using Knockout JS and having this view and ViewModel:

var LoginViewModel = function () {
    var self = this;

    self.userName = ko.observable();
    self.userPassword = ko.observable();

    self.signin = function () {
        data = ko.toJSON(self);

        $.ajax({
            url: "/signin",
            type: "post",
            data: ko.toJSON(self),
            contentType: "application/json",
            success: function (data, textStatus, xhr) {
                alert(xhr.status);
                // If status == 200(OK) change view
            },
            error: function (jqXHR, textStatus, errorThrown) {
                alert("failure");
            }
        });
    }
}

ko.applyBindings(new LoginViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<div class="container">
   <div class="col-md-4 col-md-offset-4" data-bind="visible: isVisible">
      <div class="panel panel-default">
         <div class="panel-heading" style="text-align: center;">
            <strong class="">SEHA</strong>
         </div>
         <div class="panel-body">
            <form class="form-horizontal">
               <div class="form-group">
                  <label for="username" class="col-sm-3 control-label">Name</label>
                  <div class="col-sm-9">
                     <input class="form-control" required="" type="text" data-bind="value: userName">
                  </div>
               </div>
               <div class="form-group">
                  <label for="password" class="col-sm-3 control-label">Password</label>
                  <div class="col-sm-9">
                     <input class="form-control" required="" type="password" data-bind="value: userPassword">
                  </div>
               </div>
               <div class="form-group last">
                  <div class="col-sm-offset-3 col-sm-9">
                     <button class="btn btn-success btn-sm" data-bind="click: signin">Sign in</button>
                  </div>
               </div>
            </form>
         </div>
         <div class="panel-footer">
            ~
         </div>
      </div>
   </div>
</div>

I want now to change the "view" if the user logs in. How can i accomplish that? I also would to like to select a new view model for the next view. How would i do that?

That are my first steps with javascript / knockout, so please be kind.

Put your code **in the question**, don't link to external resources — Amit, Dec 01 '15 at 22:09
Possible dupe of http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery — JohnnyHK, Dec 01 '15 at 22:58

score 1 · Answer 1 · answered Dec 02 '15 at 11:02

1

If you handle the Server part of your application, you might want to return a Redirect Code 301 and specifying the URL to redirect.

Else, you can handle this Client Side, with the javascript code: window.location.replace("./Home.html");

answered Dec 02 '15 at 11:02

Didier Aupest

3,227
2
23
35

So what i should do? Should i really only redirect to another site? Or should i add multiple divs on one page and change their visibility? When i use the Client Side method, i would have a different view model right? that was i assign to the page? Sorry for so many questions – danielDotNet Dec 02 '15 at 11:16
It depend of what you want to do :) If you want to make a Single Page App, you might want to replace the div and change visibility or various elements divs. But, for the security you should have a dedidacted page instead of hidding div, because you don't want your content to be visible for not logged in users. If you want to make an easy Single Page Application, you could do on your onSuccess Event an Ajax Call to load HTML content to display, and replace the id="container" with your new content. – Didier Aupest Dec 02 '15 at 15:04

How to change view in Knockout JS

1 Answers1