Knockout click binding with javascript confirm

Knockout click binding with javascript confirm

Asked on December 24, 2018 in knockout js.
Add Comment


  • 2 Answer(s)

        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 .

    Answered on December 24, 2018.
    Add Comment

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

     

    Answered on December 24, 2018.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.