Knockout.js UI在应该更新时未更新

我在视图模型中有一个位置的可观察阵列

我使用位置数组创建复选框列表

我还使用位置数组在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>

这是一把小提琴：

---

您的

选中的
位置的
属性
变量需要可观察，因此
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)}
];

不过，当它们映射到视图模型中时，更适合使它们可见。
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)}
];