knockout.js 和禁用 anchor 标记

Question

如何使用此自定义绑定(bind)禁用和启用 anchor 标记。它适用于输入元素，但 anchor 标记只是更改 CSS，而不是禁用。

<a href="link" data-bind="myDisabled: !enabled()"/>

ko.bindingHandlers.myDisabled = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.css.update(element, function() {return { disabled: value }; });
        ko.bindingHandlers.disable.update(element, valueAccessor);
    }
};

Answer 1

您需要在绑定(bind)处理程序中捕获点击事件。

HTML:

<a href="link" data-bind="disableClick: !enabled()">test</a>
<br/><br/><br/>
<input type="checkbox" data-bind="checked: enabled"> enabled ​

JavaScript:

ko.bindingHandlers.disableClick = {
    init: function (element, valueAccessor) {

        $(element).click(function(evt) {
            if(valueAccessor())
                evt.preventDefault();
        });

    },

    update: function(element, valueAccessor) {        
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.css.update(element, function() {return { disabled_anchor: value }; });
    }
};

ko.applyBindings({ enabled: ko.observable(false)});

这是一个工作示例:

http://jsfiddle.net/kp74u/54/

更新 1:如果您需要防止在附加 knockout 绑定(bind)处理程序后绑定(bind)其他事件处理程序，您需要将 stopImmediatePropagation 添加到事件处理程序以及 防止默认。

示例:http://jsfiddle.net/kp74u/55/

更新 2:如果您想禁用所有事件处理程序(连同绑定(bind)处理程序之前附加的点击事件处理程序，您需要“破解”jquery 事件数组)。请注意，这可能不适用于其他版本的 jquery(示例使用 1.7):

ko.bindingHandlers.disableClick = {
    init: function(element, valueAccessor) {

        $(element).click(function(evt) {
            alert('test before');
        });

        $(element).click(function(evt) {
            if (valueAccessor()) {
                evt.preventDefault();
                evt.stopImmediatePropagation();
            }
        });

        //begin of 'hack' to move our 'disable' event handler to top of the stack
        var events = $.data(element, "events");
        console.log(events);
        var handlers = events['click'];

        if (handlers.length == 1) {
            return;
        }

        handlers.splice(0, 0, handlers.pop());
        //end of 'hack' to move our 'disable' event handler to top of the stack


        $(element).click(function(evt) {
            alert('test after');
        });
    },

    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.bindingHandlers.css.update(element, function() {
            return {
                disabled_anchor: value
            };
        });
    }
};

示例:http://jsfiddle.net/nickolsky/kp74u/40/

更新 3:正如在那里提到的(suggested edit by FIR55TORM，抱歉不能批准这个完全正确的编辑，因为我来不及审查):如果你使用的是 jQuery 1.10.x，您需要添加下划线才能访问“数据”对象，如下所示:

var events = $._data(element, "events"); 

为 jQuery 1.10.x 修订的 fiddle :http://jsfiddle.net/nickolsky/kp74u/41/