knockout.js - 强制淘汰 foreach 绑定以更新 html

Question

从容器中拖放项目后，我在更新 foreach 绑定时遇到问题：

< div id="components-wrapper" data-bind="foreach: components" >.

组件 - observableArray。

拖放仅影响 HTML，因此组件保持不变，但 HTML 会发生变化。如何强制 foreach 绑定重新渲染组件以将 HTML 返回到其原始状态？

Answer 1

TLDR：我发现使用 foreach 绑定强制刷新视图的唯一可靠方法是：

var tmp = model.foo(); //save the observable current value
model.foo([]);         //assign an empty array to the observable
model.foo(tmp);        //the foreach binding will re-render the list

我有一个类似的问题，一个可观察的“页面”对象数组绑定到一个带有“foreach”的ul。foreach 绑定对数组中页面的“重新排序”没有反应。它确实对推送和删除做出了部分反应：它将渲染/删除添加/删除的元素，但保持渲染的 foreach 具有相同的旧顺序。在可观察数组上调用 .valueHasMutated() 不起作用，但上面的方法成功了。

Answer 2

调用 components.valueHasMutated() 将强制 ko 刷新视图。

Answer 3

Knockout 的总体思路是使用 ViewModel 来驱动显示 (html)，因此在您的 drop 事件中，您应该有代码 components.add(new Component())，并且应该更新 html。