如何在Knockout JS中更改视图

时间:2015-12-01 22:07:49

标签: javascript knockout.js view navigation viewmodel

我有一个简短的问题。我正在使用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>
&#13;
&#13;
&#13;

我现在想要更改&#34;视图&#34;如果用户登录。我该如何实现? 我还想为下一个视图选择一个新的视图模型。我该怎么做?

这是我使用javascript / knockout的第一步,所以请善待。

1 个答案:

答案 0 :(得分:1)

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

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