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