从自定义绑定调用标准Knockout单击绑定

Question

我想在KnockoutJS中创建一个'条件点击'绑定.基本上这是一个标准的点击绑定,就像你在Knockout中使用它一样,但是需要满足一个条件才能执行附加的函数.就我而言,最好的选择是创建一个自定义绑定处理程序,然后在允许的情况下调用标准单击绑定.

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

我想用这个自定义绑定替换所有标准点击绑定.因此,以正确的方式调用click绑定非常重要,因此HTML中提供的所有参数都会传递给该函数.例如:

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

这些需要被替换

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

如果你能帮我解决自定义绑定中缺少的部分,我将非常感激.

Answer 1

委派点击招标的正确方法如下:

• 你采取原来的功能(例如使用valueAccessor())
• 创建一个新的valueaccessor函数,在该函数中返回一个包含条件的新函数,然后调用原始函数.并将这个新的valueaccessor传递给click绑定.

所以你的safeClick看法如下:

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

演示JSFiddle.

这将适用于第一次单击,您不必手动订阅click事件或使用jQuery触发它.