4

使用自定义绑定和 $.on() 对大约 500 行数据列表上的人机交互做出反应是否有一些性能或其他收益？

想到这个问题是因为我注意到淘汰事件是使用 bind() 附加到元素的，这意味着它们在每个点击按钮上，还是我错了？

我有两个样品

首先 - http://jsfiddle.net/dzjosjusuns/yStt7/ - 附加到子项目的事件

<div data-bind="text:head.id"></div>
<div id="container" data-bind="foreach:head.rows">
    <div class="item">
        <button data-bind="click:$root.head.deleteRow">remove</button>
        <span data-bind="text:name"></span>
    </div>
</div>

第二 - http://jsfiddle.net/dzjosjusuns/NN3h8/ - 事件仅通过自定义绑定附加到父级

<div data-bind="text:head.id"></div>
<div id="container" data-bind="foreach:head.rows, onRowDelete:head.deleteRow">
    <div class="item">
        <button>remove</button>
        <span data-bind="text:name"></span>
    </div>
</div>

客户绑定

ko.bindingHandlers.onRowDelete = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $('#container').on('click', '.item button', function (event) {
            valueAccessor().call(viewModel.head, ko.dataFor(event.target), event.target);
        });
    }
};

那么，做这样的自定义绑定有什么意义吗？

4

1 回答 1

0

使用自定义绑定和 $.on() 对大约 500 行数据列表上的人类交互做出反应是否有一些性能或其他收益？

是的。使用默认事件绑定，Knockout 将为 500 行中的每一行附加一个处理程序。

正如@nemesv 所说，您可以使用 Ryan Neimeyer 的Knockout.DelegatedEvents库，该库将利用事件冒泡来有效地将处理程序附加到 DOM 元素事件。

于 2013-03-08T16:07:31.380 回答