如何在Knockout JS中更改視圖

我有一個簡短的問題。我使用的淘汰賽JS和有這種觀點和視圖模型：如何在Knockout JS中更改視圖

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/knockout，所以請善待。

來源

2015-12-01 danielDotNet

把你的代碼**的**問題，不要鏈接到外部資源 – Amit

邁克Ç已經這樣做了，現在我想：D – danielDotNet

可能的dupe http://stackoverflow.com/questions/503093/how-can-i-make-a-redirect-page-using-jquery – JohnnyHK

如果您處理應用程序的服務器部分，則可能需要返回重定向代碼301並指定要重定向的URL。

否則，你可以處理這個客戶端，使用JavaScript代碼： window.location.replace("./Home.html");

來源

2015-12-02 11:02:10

所以我應該怎麼做？我應該只是重定向到另一個網站？或者我應該在一個頁面上添加多個div並更改其可見性？當我使用客戶端方法時，我會有一個不同的視圖模型嗎？那是我分配給該頁面的？對不起，這麼多的問題 – danielDotNet

這取決於你想要做什麼:) 如果你想製作一個單頁的應用程序，你可能想要替換div並改變可見性或各種元素div。但是，爲了安全起見，您應該有一個dedidacted頁面而不是hidding div，因爲您不希望您的內容對於未登錄的用戶可見。如果您想製作簡單的單頁應用程序，您可以在onSuccess事件上執行Ajax調用以加載要顯示的HTML內容，並用您的新內容替換id =「container」。 –

如何在Knockout JS中更改視圖

回答

相關問題