我正在渲染一个大型递归数据结构，并试图让用户能够切换该结构中单个元素的编辑。由于将编辑器绑定应用于所有元素，即使它们尚不可见，我在应用绑定时遇到性能问题。
<div data-bind="visible: isEditable()">
<textarea data-bind="kendoEditor: { value: name }" > </textarea>
<button type="button" data-bind="click: toggleEdit(false)">Update</button>
</div>
如果您查看以下示例，它似乎可以正常工作。您可以单击一个元素，它将启用一个编辑器，您可以单击更新并应用更改。
但是，如果您查看以下示例，其中我添加了更多数据，由于将 kendoEditing 绑定应用于列表中的所有元素，初始加载非常慢。
有什么方法可以防止绑定应用于尚不可见的元素？
Roy 的回答可能更好，但是是的，有一种方法可以防止将绑定应用于后代元素。为此，您需要一个自定义绑定，init该绑定返回：
return { controlsDescendantBindings: true };
您可以稍后使用
ko.applyBindingsToDescendants(bindingContext, element)
应用绑定。
例如像这样：
ko.bindingHandlers.myVisible = {
init: function(element, valueAccessor) {
var visible = ko.unwrap(valueAccessor());
if (visible) {
$(element).show();
$(element).data('bindingsApplied', true);
} else {
$(element).hide();
$(element).data('bindingsApplied', false);
return { controlsDescendantBindings: true };
}
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var visible = ko.unwrap(valueAccessor());
if (visible) {
if (!$(element).data('bindingsApplied')) {
ko.applyBindingsToDescendants(bindingContext, element);
$(element).data('bindingsApplied', true);
}
$(element).show();
} else {
$(element).hide();
}
}
}
你提前做了很多切换，因为你的点击绑定应该得到一个函数，而不是一段代码。这是一个常见的错误。
为了避免绑定一百万个编辑器，您可以只交换模板而不是可见和不可见元素：
<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>