Binding Knockout.js default events to user bindings using jQuery.on () event delegation - performance and profit?

Question

Is there any performance or other profit using custom binding and $ .on () to respond to human interactions with some list of data with ~ 500 rows?

This question came to my mind because I noticed that knockout events are bound to an element using bind (), does that mean they are on every button, or am I mistaken?

I have two samples

First http://jsfiddle.net/dzjosjusuns/yStt7/ - an event attached to a child

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

The second - http://jsfiddle.net/dzjosjusuns/NN3h8/ - the event is bound to the parent object only with user binding

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

Binding custome

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

So, does it make sense to do such custom bindings?

Answer 1

Is there any performance or other benefits using custom binding and $ .on () to respond to human interactions with some list of data from ~ 500 lines?

Yes. Using the default event bindings, Knockout attaches a handler to each of the 500 lines.

As pointed out by @nemesv, you can use the Ryan Neimeyer Knockout.DelegatedEvents library, which will use event bubbles to efficiently connect handlers to the event's DOM element.