Question

我正在尝试禁用<a>元素（如果它们具有.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/

覆盖单击绑定

2 个答案: