覆盖点击绑定

Question

我正在尝试禁用 <a> 元素（它们必须是 this 而不是按钮，因为它们是引导下拉按钮下拉菜单的一部分）如果它们具有 .menuitem-disabled 类。

<a> 元素的点击功能由敲除 click: 绑定提供（href="#" 在所有这些绑定上）

我将以下代码放在我的 javascript 的顶部。如果我打破分配点击事件的行，我可以看到 jquery 选择了所有更正的元素，但click: 绑定无论如何都会触发。

$(window).load ->
        loadBindings()
        ko.applyBindings new ViewModel()
        $(".menuitem-disabled").click (e) ->
            e.stopImmediatePropagation()

我也尝试过e.preventDefault()，结果相同。

有谁知道如何正确完成此操作/我的代码有什么问题？

Answer 1

为此，您可以做一些替代。我建议使用 if 条件

var viewmodel = function(){
    self.enableAnchor = ko.computed(function(){
        return (self.otherobservable()) ? true : false
    })
}

<!-- ko if:enableAnchor -->

<a href="#" data-bind="click:someFunction">
    ....
</a>
<!-- /ko -->
<!-- ko ifnot:enableAnchor -->
<a href="#" data-bind="">
    ....
</a>    
<!-- /ko -->

如果你需要更动态的东西，你可以关注这个

self.someFunction = function(value){
    if(value == true){
        // procees code after click
    }else{
        return false
    }
}


<a href="#" data-bind="click:someFunction.bind($data,someValue)">
    ....
</a>  

Answer 2

你可以这样做

var orgClickInit = ko.bindingHandlers.click.init;
ko.bindingHandlers.click.init = function(element, valueAccessor, allBindingsAccessor, viewModel) {
    if (element.tagName === "A" && allBindingsAccessor().enable != null) {
        var disabled = ko.computed({
            read: function() {
                return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
            },
            disposeWhenNodeIsRemoved: element
        });
        ko.applyBindingsToNode(element, { css: { "anchor-disabled": disabled } });
        var handler = valueAccessor();
        valueAccessor = function() {
            return function() {
                if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
                    handler.apply(this, arguments);
                }
            };
        };
    }
    orgClickInit.apply(this, arguments);
};

http://jsfiddle.net/xCfQC/13/