Custom Double Click binding
Latest copy of:
-jQuery templates
-KnockoutJS
-KO Mapping plugin
HTML
<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<button data-bind="dblClick: alertDblClick('runs immediately, but it should not')">This runs immediately </button>
<button data-bind="dblClick: function(){alertDblClick('runs upon double click');}">Double click this</button>
<div data-bind="event: { mouseover: writeConsole, mouseout: writedbConsole }">
click Me
</div>
JavaScript
ko.bindingHandlers.dblClick = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
$(element).dblclick(function () {
// extract
var inner = ko.utils.unwrapObservable(valueAccessor());
// invoke
inner();
});
}
};
var viewModel = {
alertDblClick: function(param1) {
alert(param1);
},
writeConsole: function(){
console.log("click");
},
writedbConsole: function(){
console.log("dbclick");
}
};
ko.applyBindings(viewModel);