Question

我有一个带有50个项目的可观察数组，使用foreach绑定进行渲染。

我试图理解为什么每个项目渲染的模板都受到if绑定的影响。基本上，我基于计算的observable显示或隐藏了我的大块模板。这让我的渲染时间增加了70-100％（与使用visible绑定相比）。

Ryan Niemeyer的great post on this topic表示将计算绑定到if绑定将导致每次更新计算的任何部分时重新呈现所有内容。但是我的计算在数组循环播放期间没有更改值。

this.filtersAvailable = ko.computed(function () { 
   return this.searchInfo.searchType() != 'invites' && this.searchInfo.searchType() != 'requests' 
}, this);

为了确保它实际上没有变化，我补充说：

this.filtersAvailable.subscribe(function(newVal) { alert("fa" + newVal); });
this.searchInfo.searchType.subscribe(function(newVal) { alert("st" + newVal); });

也就是说，这个计算出的定义在比我的可观察数组的各个视图模型更高的层次上，并且在我的模板中的其他位置重复地调用，当然还有我可观察数组中的其他项目。

计算出的observable的重复调用是否会导致与if绑定绑定的事物重新渲染？

Answer 1

一次又一次地访问计算的observable的值不是问题，因为每次都会返回缓存的值。听起来您的订阅没有显示频繁的更新？

如果值相同，即使是计算出来也是如此。您可以尝试在<div data-bind="text: Date()"></div>部分中投放if，看看日期是否比您预期的更频繁更新。

如果一切都被重新渲染，那么日期可能会接近相同。对于值是真实的情况，if绑定具有稍微更多的开销，因为它获取子元素的副本，然后将副本呈现为模板并绑定它。可见只会设置显示样式。现在，if绑定可以在初始值可能为false并且隐藏部分中有大量标记/绑定的情况下为您提供更好的性能。如果甚至不渲染它们，虽然可见仍然会绑定，但只是隐藏。

你也可以尝试一个命名模板，你有if。如果您在if内进行foreach，则KO必须在每个foreach项目内一次又一次地将子元素作为模板复制。你可以做<div data-bind="template: { name: 'subItemTmpl', 'if': myFlag, data: subData"></div>。

Answer 2

如果没有看到更多代码，很难对问题的形成有所了解。但是，通过使用Knockout的最新候选版本，你可能会看到一个改进，其中包括对if绑定的优化，以消除不必要的重新渲染。它可以在https://github.com/SteveSanderson/knockout/downloads下载。

KnockoutJS - 如果绑定性能

2 个答案: