javascript - 通知普通数组中的值已更改

Question

目前我绑定(bind)到普通数组。数组的值可以由外部组件更改。

是否有可能发送值已更改的通知并重新渲染 DOM 树？

我不能使用可观察对象，因此 valueHasMutated 不是解决方案，数组非常大并且包含很多复杂的对象。

Answer 1

如果我理解正确，该数组是 ViewModel 的成员(您可以控制它)，但您不能将其更改为 observableArray，因为您无法控制的事物会修改数组，使用普通数组语法。此外，您可以在这些黑盒函数运行后采取一些措施，以通知模型数组可能已发生变化。

我们可以做到。定义一个(内部)observableArray 并在包装它的 ViewModel 上定义一个公共(public)属性。这使您可以使用普通数组语法访问 observableArray。但是，对数组的单个(非可观察)元素的更改不会发送通知，因此您需要提供对内部 的 valueHasMutated 方法的调用>observableArray，在您进行更改时调用。

var vm = (function () {
    var arrayImpl = ['hi'];
    var obsArray = ko.observableArray(arrayImpl);
    var itemNumbers = [1,2,3,4,5,6,7,8,9];

    var self = {
        itemNumbers: itemNumbers,
        selectedItemNumber: ko.observable(1),
        newValue: ko.observable(),
        arrayHasMutated:obsArray.valueHasMutated
    };
    Object.defineProperty(self, 'plainArray', {
        get: obsArray,
        set: obsArray
    });
    return self;
});

ko.applyBindings(vm);

我们的应用程序可以像使用常规数组一样使用 plainArray 属性。进行更新时，调用 arrayHasMutated。

Item Number: <select data-bind="options:itemNumbers, value:selectedItemNumber"></select>
<br />
New Value: <input data-bind="value:newValue" />
<button data-bind="click:function () { var idx=selectedItemNumber()-1; plainArray[idx] = newValue(); arrayHasMutated(); }">Set it</button>
<ol data-bind="foreach:plainArray">
    <li data-bind="text:$data"></li>
</ol>
<br />
Length: <span data-bind="text:plainArray.length"></span>

试一试:http://jsfiddle.net/4jogh3k5/1/