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函数，在该函数中返回一个包含条件的新函数，然后调用原始函数。并将此新值访问者传递给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触发它。

Answer 2

您可以按照以下方式调用：

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

编辑：您可以第一次手动调用click事件：

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

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

2 个答案: