mvvm - 带有淘汰赛的 Mvvm：数组绑定和更改内部对象状态

Question

我的视图模型中有一个数组。该数组的项是具有两个属性的 Person 对象。当我将它绑定到模板时，没关系。但是当我更改其中一个属性的状态时，它不会反映在 UI 中。

我做错什么了 ？

<script type="text/html" id="person-template">
    <p>Name: <span data-bind="text: name"></span></p>
    <p>
        Is On Facebook ?
        <input type="checkbox" data-bind="checked: IsOnFacebook" />
    </p>
</script>

<script type="text/javascript">
    var ppl = [
            { name: 'Pouyan', IsOnFacebook: ko.observable(true) },
            { name: 'Reza', IsOnFacebook: ko.observable(false) }
    ];
    function MyViewModel() {
        this.people = ko.observableArray(ppl),
        this.toggle = function () {
            for (var i = 0; i < ppl.length; i++) {
                ppl[i].IsOnFacebook = false;
            }
        }
    }
    ko.applyBindings(new MyViewModel());
</script>

当我按下按钮时，我想在 People.IsOnFacebook 属性中进行更改。更改将成功进行，但 UI 不显示。

Answer 1

你应该像函数一样调用它。像：

ppl[i].IsOnFacebook(false);

这是因为ko.observable()返回一个函数。它不再是您调用的属性，而是函数调用。因此，他们会在后台更新您的 UI。检索可观察的属性。您还应该使用函数调用。

请参阅本教程：http ://learn.knockoutjs.com/#/?tutorial=intro