Knockout click binding with javascript confirm
Knockout click binding with javascript confirm
This answer is very useful :
The user should make their custom confirmClick binding handler which takes the message and their click handler and cover the confirmation logic :
ko.bindingHandlers.confirmClick = { init: function(element, valueAccessor, allBindings, viewModel) { var value = valueAccessor(); var message = ko.unwrap(value.message); var click = value.click; ko.applyBindingsToNode(element, { click: function () { if (confirm(message)) return click.apply(this, Array.prototype.slice.apply(arguments)); }}, viewModel); } }
And use it like described:
<a data-bind="confirmClick: { message: 'Are you sure?', click: someMethod }"> Confirmable link</a>
Update : The user is required the click.apply magic if it is required to be protected and transfer over the original click event handler args to their own click event handler .
For using the Knockout click binding with javascript confirm ,Try this method :
This is method help the Knockout to find the click binding handler :
ko.bindingHandlers[eventName] = { 'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) { var newValueAccessor = function () { var result = {}; result[eventName] = valueAccessor(); return result; }; return ko.bindingHandlers['event']['init'].call(this, element, newValueAccessor, allBindings, viewModel, bindingContext); } }
Where the eventName is ‘click‘ for that binding handler.Try this in the view model or after Knockout is loaded should be work :
ko.bindingHandlers.clickConfirm = { 'init': function(element, valueAccessor, allBindings, viewModel, bindingContext) { var newValueAccessor = function () { var result = {}; result.click = function () { var result = confirm('You are about to confirm something.'); // If they press OK, console.log('pressed - ', result); if (result === true) { console.log('Calling this - ', valueAccessor()); valueAccessor()(); } } return result; }; return ko.bindingHandlers['event']['init'].call(this, element, newValueAccessor, allBindings, viewModel, bindingContext); } }