Question

我正在渲染一个大的递归数据结构，并试图让用户能够切换该结构中各个元素的编辑。由于编辑器绑定应用于所有元素，即使它们不可见，我在应用绑定时遇到性能问题。

<div data-bind="visible: isEditable()">
    <textarea data-bind="kendoEditor: { value: name }" > </textarea>
    <button type="button" data-bind="click: toggleEdit(false)">Update</button>
</div>

如果您查看以下示例，它似乎可以正常工作。您可以单击某个元素，它将启用编辑器，您可以单击“更新”并将应用更改。

jsfiddle 1

但是，如果你看下面我添加了更多数据的例子，由于将kendoEditing绑定应用于列表中的所有元素，初始加载速度非常慢。

jsfiddle 2

有没有办法阻止绑定应用于尚未可见的元素？

Answer 1

Roy的答案可能更好，但是，有一种方法可以防止绑定应用于后代元素。为此，您需要使用commit cff05df7d5a91d555c8c848b71a384b5048aa8f8 Author: Barend <email hidden> Date: Fri Oct 9 21:15:25 2015 +0200 Y message --- Y | 0 1 file changed, 0 insertions(+), 0 deletions(-)的自定义绑定返回：

init

您可以稍后使用

return { controlsDescendantBindings: true };

应用绑定。

例如：

ko.applyBindingsToDescendants(bindingContext, element)

Fiddle

Documentation

Answer 2

您提前进行了大量的切换，因为您的点击绑定应该是一个功能，而不是一段代码。这是一个常见的错误。

为避免绑定一百万个编辑器，您只需交换模板，而不是使用可见和不可见的元素：

<ul data-bind="template: { name: 'itemTmpl', foreach: Items }"></ul>
<script id="itemTmpl" type="text/html">
<li>
    <div data-bind="template: isEditable() ? 'editable' : 'notEditable'"></div>
    <ul data-bind="template: { name: 'itemTmpl', foreach: $data.items }"></ul>
</li>
</script>
<script id="notEditable" type="text/html">
    <span data-bind="html: name, click: toggleEdit.bind(null,true)">
    </span>
</script>
<script id="editable" type="text/html">
    <textarea data-bind="kendoEditor: { value: name }"></textarea>
    <button type="button" data-bind="click: toggleEdit.bind(null, false)">Update</button>
</script>

Updated Fiddle

防止敲除将绑定应用于不可见的元素

2 个答案: