Call standard Knockout click binding from a custom binding

Question

I would like to create a 'conditional click' binding in KnockoutJS. Basically this is a standard click binding like you would use it in Knockout, but a condition needs to be met in order for the attached function to be executed. In my case, the best option is to create a custom bindinghandler in which you then call the standard click binding if allowed.

ko.bindingHandlers.safeClick = {
    'init': function(element, valueAccessor, allBindingsAccessor, context) {
        $(element).click(function() {
            if(mycondition == true) {
                // call the standard click binding here -> this is the part I don't know
            }
        });
    }
}

I want to replace all of my standard click bindings with this custom binding. Therefore it is important to call the click binding in the right way, so all of the parameters provided in HTML are passed through to the function. For example:

<a href="#" data-bind="click: basevm.gotopage.bind($data, '#homepage')">Home</a>
<a href="#" data-bind="click: itemvm.activateItem">Activate</a>

These need to be replaced by

<a href="#" data-bind="safeClick: basevm.gotopage.bind($data, '#homepage')">Home</a>
<a href="#" data-bind="safeClick: itemvm.activateItem">Activate</a>

I would very much appreciate it if you could help me with the missing part in the custom binding.

Answer 1

The correct way to delegate the click biding here is the following:

• you take your original function (e.g using valueAccessor())
• create a new valueaccessor function where you return a new function containing your condition which then calls your original function. And pass this new valueaccessor to the click binding.

So your safeClick will look like this:

ko.bindingHandlers.safeClick = {
    'init': function (element, valueAccessor, allBindingsAccessor, 
                      viewModel, bindingContext) {
        var originalFunction = valueAccessor();
        var newValueAccesssor = function() {
            return function () {
                if (mycondition == true)
                    //pass through the arguments
                    originalFunction.apply(viewModel, arguments);
            }
        }
        ko.bindingHandlers.click.init(element, newValueAccesssor, 
            allBindingsAccessor, viewModel, bindingContext);
    }
}

Demo JSFiddle.

This is will work for the first click, and you don't have to manually subscribe on the click event or trigger it with jQuery.

Answer 2

You can call it as follow:

ko.bindingHandlers.click.init(element, valueAccessor, allBindingsAccessor, context);

EDIT: You can mannualy call click event first time:

ko.bindingHandlers.safeClick = {
    'init': function(element, valueAccessor, allBindingsAccessor, context) {
        $(element).click(function() {
            if(mycondition == true) {
                ko.bindingHandlers.click.init(element, valueAccessor, allBindingsAccessor, context);
            }
        });
        if(mycondition == true) {
             $(element).trigger('click');
        }
    }
}