KnockoutJS綁定不顯示

Question

我使用Knockout JS和映射插件將MVC viewmodel映射到viewmodel屬性;

var viewModel = function() { 
    var self = this; 
    self.EntityKey = 0; 
    self.observables = ko.observable(); 
    self.RoleName = ko.observable(""); 

    // CRUD Actions 
    self.getPaged = function (page) { 
     $.ajax({ 
      url: "/Core/Authentication/Role/UpdateIndex", 
      dataType: 'json', 
      data: { pageNumber: page }, 
      success: function (result) { 
       self.observables = ko.mapping.fromJS(result); 
      }, 
     }); 
    }; 

    this.remove = function (data) { 
     $.ajax({ 
      type: "POST", 
      url: "/Core/Authentication/Role/Delete", 
      dataType: 'json', 
      data: { userId: data.EntityKey() }, 
      success: function (result) { 
       self.getPaged(self.observables.CurrentPage); 
       toastr.success(result); 
      }, 
     }); 
    }; 

    this.update = function (data) { 
     $.ajax({ 
      type: "POST", 
      url: "/Core/Authentication/Role/Update", 
      dataType: 'json', 
      data: ko.toJSON(this), 
      success: function (result) { 
       toastr.success(result); 
      }, 
     }); 
    }; 

    this.create = function() { 
     $.ajax({ 
      type: "POST", 
      url: "/Core/Authentication/Role/Create", 
      dataType: 'json', 
      data: ko.toJSON(this), 
      success: function (result) { 
       self.getPaged(self.observables.CurrentPage); 
       toastr.success(result); 
       self.RoleName(""); 
      }, 
     }); 
    }; 

    self.getPaged(1);      
} 

$(function() { 
    var vm = new viewModel(); 
    ko.applyBindings(vm); 
}); 

這是我的觀點;

<table data-bind="visible: observables.PageItems"> 
    <tr> 
     <th>@AuthRes.Resource.EntityKey</th> 
     <th>@AuthRes.Resource.RoleName</th> 
     <th>@AuthRes.Resource.Update</th> 
     <th>@AuthRes.Resource.Delete</th> 
    </tr> 
    <tr data-bind="foreach: observables.PageItems"> 
     <td><span data-bind="text: $data.EntityKey" /></td> 
     <td><input type="text" data-bind="value: $data.RoleName" /></td> 
     <td><a data-bind="click: $root.update.bind($data)">@AuthRes.Resource.Update</a></td> 
     <td><a href='#' data-bind="click: $root.remove.bind($data)">@AuthRes.Resource.Delete</a></td> 
    </tr> 
</table> 

<h2>@AuthRes.Resource.CreateNew</h2> 
<table> 
    <tr> 
     <th>@AuthRes.Resource.RoleName</th> 
     <th></th> 
    </tr> 
    <tr> 
     <td> 
      <input type="text" required="required" data-bind="value: RoleName" /> 
     </td> 
     <td> 
      <a href="#" data-bind="click: $root.create" />@AuthRes.Resource.Submit</a> 
     </td> 
    </tr> 
</table> 

viewModel.observables正確更新，數據是正確的，但由於某種原因未綁定到的foreach爲observables.PageItems。

任何想法我做錯了什麼？

Answer 1

1.該foreach將適用於您的標記的孩子。

與您的代碼

<tr data-bind="foreach: observables.PageItems"> 
    <td><span data-bind="text: $data.EntityKey" /></td> 
    <td><input type="text" data-bind="value: $data.RoleName" /></td> 
    <td> 
     <a data-bind="click: $root.update.bind($data)">@AuthRes.Resource.Update</a> 
    </td> 
    <td> 
    <a href='#' 
     data-bind="click: $root.remove.bind($data)">@AuthRes.Resource.Delete</a> 
    </td> 
</tr> 

只有一個tr將被創建。

嘗試使用無容器的語法：

<!-- ko foreach: observables.PageItems --> 
<tr> 
    <td><span data-bind="text: $data.EntityKey" /></td> 
    <td><input type="text" data-bind="value: $data.RoleName" /></td> 
    <td> 
     <a data-bind="click: $root.update.bind($data)">@AuthRes.Resource.Update</a> 
    </td> 
    <td> 
    <a href='#' 
     data-bind="click: $root.remove.bind($data)">@AuthRes.Resource.Delete</a> 
    </td> 
</tr> 
<!-- /ko --> 

2.Also，爲您檢查的visible結合你可能想嘗試

<table data-bind="visible: observables.PageItems().length > 0"> 

3.您映射語法不正確

當你聲明self.observables = ko.observable();，你綁定到它，淘汰賽將創建一個鏈接，以便當你更新self.observables時，HTML將更新。

現在，當你這樣做self.observables = ko.mapping.fromJS(result);，它不更新，它打破了鏈接並分配一個新的可觀察。這意味着html將不再更新。

此語法self.observables = ko.mapping.fromJS(result);如果在綁定（ko.applyBindings）之前完成，但您尚未擁有數據，則此語法正確。

你可以做的是使用if綁定來檢查你的數據是否已被加載。這將防止在if條件不滿足時創建綁定鏈接（每當您的條件更改爲true時都會重新創建綁定）。這樣你的綁定不會中斷。

<!-- ko if: hasInit --> 
<table data-bind="visible: observables.PageItems"> 
    <!-- ... --> 
</table> 
<!-- /ko ---> 

而且JS

var viewModel = function() { 
    var self = this; 
    self.EntityKey = 0; 
    self.hasInit = ko.observable(false); 
    //self.observables = ko.observable(); //REMOVE THIS LINE, 
              //observables will be created after 
    self.RoleName = ko.observable(""); 

    // CRUD Actions 
    self.getPaged = function (page) { 
     $.ajax({ 
      url: "/Core/Authentication/Role/UpdateIndex", 
      dataType: 'json', 
      data: { pageNumber: page }, 
      success: function (result) { 
       if (typeof self.observables === 'undefined') { //first call 
        self.observables = ko.mapping.fromJS(result); 
        self.hasInit(true); 
       } else //updates 
        ko.mapping.fromJS(results, self.observables); 
      }, 
     }); 
    }; 
}