javascript - Knockout.js 默认事件绑定(bind)与使用 jQuery 事件委托(delegate)的自定义绑定(bind) .on() - 性能和 yield ？

Question

使用自定义绑定(bind)和 $.on() 对具有约 500 行的某些数据列表的人机交互使用react是否有一些性能或其他 yield ？

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

我有两个样本

第一 - 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/ - 事件仅通过自定义绑定(bind)附加到父级

<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>

客户绑定(bind)

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

那么，进行此类自定义绑定(bind)是否有意义？

Answer 1

Is there some performance or other gains using custom binding and $.on() to react on human interaction on some list of data with ~500 rows?

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

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