4

カスタム バインディングと $.on() を使用して、500 行以下のデータ リストで人間の操作に反応することで、パフォーマンスやその他の利点が得られますか?

bind() を使用してノックアウト イベントが要素に関連付けられていることに気付いたので、この質問が頭に浮かびました。

私は2つのサンプルを持っています

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

2 番目 - 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 に答える