UI不更新時，它應該

Question

我有我的視圖模型中的位置observableArray。

1. 我使用locations數組創建複選框列表。
2. 我還使用位置數組在UI中顯示選中的位置。

當複選框被選中時，視圖模型被更新。但是，顯示的位置不會更新。

<ul data-bind="foreach: locations"> 
    <li data-bind="text: name, visible: checked"></li> 
</ul> 

<ul data-bind="foreach: locations"> 
    <li> 
     <input type="checkbox" data-bind="value: id, checked: checked" /> 
     <span data-bind="text: name"></span><br/> 
    </li> 
</ul> 
<br/> 
<button data-bind="click: debug">Debug</button> 

var locations = [ 
    {'id': 1, 'name': 'PP', 'checked': false}, 
    {'id': 2, 'name': 'Ta keo', 'checked': false}, 
    {'id': 3, 'name': 'Kompong Som', 'checked': true} 
]; 

var viewModel; 

viewModel = (function() { 
    function viewModel(locations) { 
     self = this; 
     this.locations = ko.observableArray(locations); 
     this.debug = function() { 
      alert(JSON.stringify(self.locations())); 
     }; 
    } 
    return viewModel; 
})(); 

ko.applyBindings(new viewModel(locations)); 

這裏是一個小提琴： http://jsfiddle.net/bL7weqkz/

Answer 1

你checked的locations變量需要財產可觀察到，所以knockout.js可以當屬性更新檢測。將您的代碼更改爲：

var locations = [ 
    {'id': 1, 'name': 'PP', 'checked': ko.observable(false)}, 
    {'id': 2, 'name': 'Ta keo', 'checked': ko.observable(false)}, 
    {'id': 3, 'name': 'Kompong Som', 'checked': ko.observable(true)} 
];