knockoutjs overriding bindinghandlers

http://stackoverflow.com/questions/9002163/knockoutjs-overriding-bindinghandlers

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<ul data-bind="foreach: items">
    <li>
        <a href="#" data-bind="text: id, click: $root.selectedItem"></a>
    </li>
</ul>
        
<hr/>

<div data-bind="with: selectedItem">
    <span data-bind="text: id"></span>
</div>

CSS

li { padding: 10px; }

JavaScript

(function() {
    var originalInit = ko.bindingHandlers.click.init,
        originalUpdate = ko.bindingHandlers.click.update;
    
    ko.bindingHandlers.click = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            var wrappedValueAccessor = function() {
                return function(data, event) {
                   //run some pre code
                   ko.bindingHandlers.click.preOnClick.call(viewModel, data, event);
                    
                   valueAccessor().call(viewModel, data, event);
                    
                   //run some post code
                   ko.bindingHandlers.click.postOnClick.call(viewModel, data, event);
                };
                
            };
            
            originalInit(element, wrappedValueAccessor, allBindingsAccessor, viewModel);
        },
        update: originalUpdate,
        preOnClick: function(data, event) {
            alert("pre code for " + data.id);
        },
        postOnClick: function(data, event) {
            alert("post code for " + data.id);
        }
    };
})();
   
var viewModel = {
    items: [{id: 1}, {id:2}, {id:3}],
    selectedItem: ko.observable()
};

ko.applyBindings(viewModel);