Question

我尝试将observableArray绑定到我的页面上的div，一切正常。此数组包含从JSON获得的简单WebService个对象，不可观察。

之后，我希望能够修改数组中的那些对象，并希望每次修改都要刷新视图。例如，当单击复选框时，我想更改JSON对象上的标志（这似乎可以自动运行），同时我的UI应该更新，但这不会发生。任何人都可以向我提供原因（这是因为这些对象很简单，不可观察吗？）和解决方案？

    var DocumentContentModel = function () {
        var self = this;
        self.content = ko.observableArray();
        self.ElementApprovalChanged = function (element) {
            DocumentService.DoSomething(
                element.Id,
                function (result) {
                    if (!result) {
                        var negatedApproved = !element.Approved;
                        element.Approved = negatedApproved;
                    }
                },
                function (error) {
                    alert(error);
                });
            return true;
        };
    };

    $(document).ready(function () {
        var contentModel = new ContentModel();
        DocumentService.GetContent(1,
        function (result) {
            contentModel.content(JSON.parse(result));
        });

        ko.applyBindings(contentModel);
    });

UI

<div class="ContentContainer">
    <div data-bind='foreach: content'>
        <div class="ContentElement" data-bind='css: { NotApproved: !Approved} '>
           <div class="ContentValue" data-bind='html: Value'></div>
            <div class="Approval">
                <input type="checkbox" data-bind='checked: Approved, click: $root.ElementApprovalChanged' />
            </div>
         </div>
     </div>
</div>

正在发生的事情是复选框点击我向webservice发送请求，如果此调用返回false，我想重置元素的Approved标志。即便如此，选择复选框也应更改div类属性，以便在需要时将其标记为NotApproved。但这一切都不会发生。

Answer 1

observableArray仅跟踪数组。因此，如果在数组中添加，删除或替换某些内容，则会触发对视图的更新。

observableArray不跟踪数组中项目的各个属性的状态。因此，如果对象上有Approved标记，则需要对UI进行观察，以反映对该属性的更改。

所以你会有类似的东西：

element.Approved = ko.observable(false);
....
....

if (!result) {                         
  var negatedApproved = !element.Approved();                         
  element.Approved(negatedApproved);                     
}

（或者如果你想更加谨慎：

element.Approved(!element.Approved());

）

ObservableArray不通知项目何时更改

1 个答案: