javascript敲除綁定視圖

Question

在這裏我有我的get方法獲取我想要返回的數據，以便將其與視圖頁面綁定。我無法將自己的頭腦包裝到如何將這些信息綁定到視圖上。

獲取方法：

var getRoster = function() { 
    Ajax.Get({ 
     Url: ...., 
     DataToSubmit: {id: properties.Id }, 
     DataType: "json", 
     OnSuccess: function (roleData, status, jqXHR) { 

      console.log("roles:", roleData.length); 

      Ajax.Get({ 
       Url: ..., 
       DataToSubmit: { pageNumber: 1, id: properties.Id }, 
       DataType: "json", 
       OnSuccess: function (userData, status, jqXHR) { 

        for (var x in roleData) 
        { 
         var role = roleData[x]; 
         console.log(role); 
         for (var y in userData) 
         { 
          var user = userData[y]; 
          if (user.ContentRole == role.ContentRole) 
          { 
           rosterViewModel.PushUser(new userViewModel(user)); 
           console.log(user); 
          } 
         } 
         roleTypesViewModel.PushRole(new roleViewModel(role)); 
        } 
       } 
      }); 
     } 
    }); 

rosterViewModel.PushUser = function (user) { 
     viewModel.RosterUsers.push(new userViewModel(user)); 
    }; 

roleTypesViewModel.PushRole = function (role) { 
     viewModel.RosterRoleTypes.push(new roleViewModel(role)); 
    } 

var userViewModel = function (data) { 
     var _self = this; 
     _self.ID = ko.observable(data.ID); 
     _self.Name = ko.observable(data.Name); 
     _self.Email = ko.observable(data.Email); 
     _self.ContentRole = ko.observable(data.ContentRole); 
    }; 

var roleViewModel = function (data) { 
     var _self = this; 
     _self.ContentRole = ko.observable(data.ContentRole); 
     _self.RoleName = ko.observable(data.RoleName); 
     _self.RoleRank = ko.observable(data.RoleRank); 
     _self.UserCount = ko.observable(data.UserCount); 
    }; 

var viewModel = { 
     RosterRoleTypes: ko.observableArray([]), 
     RosterUsers: ko.observableArray([]) 
    }; 

查看：

<div id="gridView" data-bind="foreach: RosterRoleTypes"> 
      <h3 class="roleHeader"><span data-bind="text:RoleName"></span> 
       <span class="userCount">(<span data-bind="text:UserCount"></span>)</span> 
      </h3> 

      <div data-bind="template: { name: 'grid', foreach: RosterUsers}"> 

      </div> 
     </div> 

我怎樣才能綁定我的數據在我看來，以顯示？

Answer 1

如果你想你的頁面的多個區域綁定到不同的視圖模型，即通過一個額外的參數傳遞給您的ko.applyBindings（）的調用方法是可行的。你的問題是你在混合模型和查看模型，並且使用不當。如果你想有一個視圖模型調整你的代碼，包括所有的視圖模型的功能和設置您的模型作爲模型來代替的ViewModels -

function rosterViewModel() { 
    var self = this; 
    self.RosterRoleTypes = ko.observableArray([]), 
    self.RosterUsers = ko.observableArray([]) 
    self.PushUser = function (user) { 
     viewModel.RosterUsers.push(new userModel(user)); 
    }; 
    self.PushRole = function (role) { 
     viewModel.RosterRoleTypes.push(new roleModel(role)); 
    }; 
self.getRoster = function() { 
    Ajax.Get({ 
     Url: ...., 
     DataToSubmit: {id: properties.Id }, 
     DataType: "json", 
     OnSuccess: function (roleData, status, jqXHR) { 
      Ajax.Get({ 
       Url: ..., 
       DataToSubmit: { pageNumber: 1, id: properties.Id }, 
       DataType: "json", 
       OnSuccess: function (userData, status, jqXHR) { 

        for (var x in roleData) 
        { 
         var role = roleData[x]; 
         for (var y in userData) 
         { 
          var user = userData[y]; 
          if (user.ContentRole == role.ContentRole) 
          { 
           self.PushUser(new userModel(user)); 
          } 
         } 
         self.PushRole(new roleModel(role)); 
        } 
       } 
      }); 
     } 
    }); 
} 

var userModel = function (data) { 
     var _self = this; 
     _self.ID = ko.observable(data.ID); 
     _self.Name = ko.observable(data.Name); 
     _self.Email = ko.observable(data.Email); 
     _self.ContentRole = ko.observable(data.ContentRole); 
    }; 

var roleModel = function (data) { 
     var _self = this; 
     _self.ContentRole = ko.observable(data.ContentRole); 
     _self.RoleName = ko.observable(data.RoleName); 
     _self.RoleRank = ko.observable(data.RoleRank); 
     _self.UserCount = ko.observable(data.UserCount); 
    }; 

ko.applyBindings(new rosterViewModel()); 

這是假設你想用一個單一的視圖模型爲您視圖。如果要合併應該分別綁定的多個內容區域，則可以創建兩個視圖模型並將它們合併，如此問題所示 - KnockOutJS - Multiple ViewModels in a single View - 或者也可以通過向ko.applyBindings（）方法傳遞一個附加參數來單獨綁定它們如下圖所示 - Example of knockoutjs pattern for multi-view applications

Answer 2

添加

ko.applyBindings(viewModel); 

在某處你的應用程序。

Answer 3

要綁定到UI的所有數據都將作爲KO可觀察或可觀察數組的視圖模型的屬性。一旦創建了視圖模型併爲其成員分配了數據（您的情況爲回調），則需要使用ko.applyBindinds應用綁定，以便數據綁定到UI。在你的情況下，最後的AJAX成功回調似乎是適當的地方。

此外，您的HTML使用模板綁定，但顯然沒有使用名稱「網格」定義的模板。檢查這一點。

淘汰賽教程鏈接http://learn.knockoutjs.com/#/?tutorial=intro