knockout.js - KnockoutJS - 如果绑定(bind)性能

Question

我有一个包含 50 个项目的可观察数组，使用 foreach 绑定(bind)呈现。

我试图理解为什么每个项目呈现的模板都受到 if 绑定(bind)的影响。本质上，我是根据计算出的可观察量来显示或隐藏我的模板的大部分内容。这让我感到震惊，渲染时间增加了 70-100%(与使用 visible 绑定(bind)相比)。

Ryan Niemeyer 的 great post on this topic指示将计算绑定(bind)到 if 绑定(bind)将导致每次更新计算的任何部分时重新呈现所有内容。但是我的计算不会在可观察数组循环期间更改值。

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); });

就是说，这个计算是在比我的可观察数组的各个 View 模型更高的级别上定义的，并且在我的模板的其他地方被重复调用，当然还有我的可观察数组中的所有其他项目。

这种重复调用 计算的可观察对象是否会导致使用 if 绑定(bind)重新渲染绑定(bind)到它的东西？

Answer 1

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

通过计算，即使值相同，也会如此。你可以尝试扔一个 <div data-bind="text: Date()"></div>​​​​​​​​​​​​​​​​​​​​​在你的if部分，看看日期的更新频率是否比您预期的要高。

如果一切都一次又一次地重新呈现，日期可能会接近相同。对于值为 truthy 的情况，if 绑定(bind)的开销稍大一些，因为它获取子元素的副本，然后将副本呈现为模板并对其进行绑定(bind)。 visible 只会设置显示样式。现在，if 绑定(bind)可以在初始值可能为 false 并且隐藏部分中有很多标记/绑定(bind)的情况下为您提供更好的性能。 if 甚至不会渲染它们，而 visible 仍然会绑定(bind)，但只是隐藏。

您也可以尝试命名模板，其中包含您的 if。如果你正在做 if在 foreach 里面, 然后 KO 必须在每个 foreach 项目中一次又一次地复制子元素作为模板。你可以做 <div data-bind="template: { name: 'subItemTmpl', 'if': myFlag, data: subData"></div> .