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相同，但允许更多地控制模板内的对象。

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

不应该尊重foreach模板绑定使用的相同模式吗？

Answer 1

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

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

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

KnockoutJS Mapping更新无法与<！ - ko foreach： - >样式绑定一起正常工作

1 个答案: