如何在 Knockout JS 中更改视图

Question

我有一个简短的问题。我正在使用 Knockout JS 并拥有此视图和 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>

如果用户登录，我现在想更改“视图”。我该如何实现？ 我还想为下一个视图选择一个新的视图模型。我该怎么做？

这是我使用 javascript/knout 的第一步，请善待。

Answer 1

如果您处理应用程序的服务器部分，您可能希望返回重定向代码 301 并指定要重定向的 URL。

否则，您可以使用 javascript 代码处理此客户端： window.location.replace("./Home.html");