knockout.js - KnockoutJS 映射更新无法与 <!--ko foreach : --> style binding 一起正常工作

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 每次都会更新模板，即使数据没有改变。

我已经使用这两个 fiddle 来说明这一点:

using the foreach binding (正常工作)

using the data binding (严重失败)

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

我真的无法弄清楚有什么区别。我的印象是数据绑定(bind)的工作方式与 foreach 相同，但允许对模板内的对象进行更多控制。

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

不应该 <!--ko foreach:-->尊重 foreach 模板绑定(bind)使用的相同模式？

Answer 1

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

避免这种情况的一个简单方法是确保模板绑定(bind)不会打开您的people。可观察数组。您可以传递 { myArray: people } 之类的数据然后做你的foreach在 myArray .

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