Question

我的视图模型中有一个observableArray位置。

我使用locations数组创建复选框列表。
我还使用位置数组在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)}
];

UI不应该更新

1 个答案: