KnockoutJS 映射更新无法与 <!--ko foreach: --> 样式绑定一起正常工作

Question

我有一个看起来像这样的 KnockoutJS 模板：

<div data-bind="template: {name: 'testTemplate', data: people}"></div>

<script id="testTemplate" type="text/html">
    <!--ko foreach: $data-->        
    <div class="items" data-bind="text: full() + ' updated at: ' + Date()"></div>
    <!--/ko-->
</script>

在运行第 N 次测试后，我意识到创建这样的模板是有缺陷的，因为 KnockoutJS 每次都会更新模板，即使数据没有改变。

我已经用这两个小提琴说明了这一点：

• using the foreach binding（正常工作）
• using the data binding（严重失败）

如您所见，如果您在 foreach 绑定上点击初始加载或加载更新数据按钮，除非数据实际更改，否则 UI 永远不会重新渲染。不幸的是，如果您对数据样式绑定执行相同操作，则每次都会重新渲染。

我真的不知道有什么区别。我的印象是数据绑定的工作方式与 foreach 相同，但允许对模板内的对象进行更多控制。

我使用它的唯一原因是因为我有一组嵌套模板，并且我需要更接近手头的实际对象。我应该能够重新考虑，并摆脱这种方法，但我仍然想知道为什么这是一个问题。

<!--ko foreach:--> 不应该遵循 foreach 模板绑定使用的相同模式吗？

Answer 1

问题是您的模板绑定创建了对您的people observableArray 的订阅，因为它作为data 传递。当people 数组更新（推送/删除项目等）时，这将触发模板绑定以重新渲染模板。在您的情况下，这会重新呈现所有内容，因此模板内的 foreach 永远不会有机会提高效率。

避免这种情况的一种简单方法是确保模板绑定不会解开您的people observableArray。您可以传递{ myArray: people } 之类的数据，然后在myArray 上执行您的foreach。

这是一个示例：http://jsfiddle.net/rniemeyer/bVPwM/4/