6

我想在 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
            }
        });
    }
}

我想用这个自定义绑定替换我所有的标准点击绑定。因此，以正确的方式调用点击绑定很重要，因此 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>

如果您能帮助我解决自定义绑定中缺少的部分，我将不胜感激。

4

2 回答 2

13

此处委派点击出价的正确方法如下：

  • 您使用原始功能（例如使用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。

这适用于第一次点击，您不必手动订阅点击事件或使用 jQuery 触发它。

于 2013-08-09T08:54:59.507 回答
1

你可以这样称呼它：

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

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

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');
        }
    }
}
于 2013-08-09T08:07:43.653 回答