KnockoutJS，批量更新 observableArray？答案

【问题标题】：KnockoutJS, batch update observableArray?KnockoutJS，批量更新 observableArray？
【发布时间】：2013-02-02 00:27:18
【问题描述】：

我有以下场景：

由 observableArray 表示的项目列表，除了内容/标题等。我想让它们中的每一个都可以在视图中折叠。

现在问题变成了我是否应该将此状态存储为每个项目的可观察对象：如果是这样，我如何实现一个触发器来有效地切换所有项目的打开/关闭 - 即。最小化 dom 更新。

ko.utils.arrayForEach 似乎是要走的路，它是否仅在循环结束时触发视图刷新？有没有更好的办法？

ko.utils.arrayForEach(this.items(), function(item) {
    ...
    item.close(true);
    ...
});

编辑：这就是 DOM 中发生的事情（在淘汰赛 foreach 循环内）

<div class="item">
    <!-- ko 'if': !close() -->
    <div class="article" data-bind="html: article"></div>
    <!-- /ko -->
</div>

所以基本上我可以单击此页面上某处的按钮，该按钮运行 ko.utils.arrayForEach 来切换所有项目。它有效，我只是不知道这是否是最好的方法（例如，只触发一次 dom 更新而不是每个项目）。

【问题讨论】：

如果你的视图包含依赖于可见项目数量的元素，你应该结合throttle-extender使用计算的observable。否则，arrayForEach 版本就可以了，因为没有什么可以“最小化”必要的 DOM 更新（每个项目都需要显示/隐藏，你想在那里优化什么？）。
我觉得我之前的例子很迷惑人，现在更新...
您期望“最小化的 DOM 更新”是什么样的？不知何故，仍然需要添加/删除或显示/隐藏所有元素。不知何故，这必须一个接一个地发生。所以那里没有什么可以优化的（只有当你有受每个项目更改影响的元素时）。
我正在考虑这样的问题：knockmeout.net/2012/04/knockoutjs-performance-gotcha.html - 例如，当我关闭所有项目时，理想情况下我希望模型通知视图一次，而不是 N 次。

标签： javascript dom mvvm knockout.js

【解决方案1】：

在我看来，您需要实现过滤。根据您的数组创建新的过滤数组并显示项目取决于您的属性。

vm.filteredItems = ko.computed(function () {
    return ko.utils.arrayFilter(this.items(), function (fitem) {
        if ('open' == fitem.state()) {
            return true;
        }
        return false;
    });
}, vm);

在每个项目的适当事件中更改state 属性并将filteredItems 绑定到您的列表控件。

查看next example了解更多详情

【讨论】：