knockout.js和禁用锚标签

Question

如何使用此自定义绑定禁用和启用锚标记.它适用于输入元素,但是锚标记只是改变了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

您需要在绑定处理程序中捕获click事件.

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:如果您需要阻止在附加敲除绑定处理程序后绑定的其他事件处理程序,则需要将其添加stopImmediatePropagation到事件处理程序中preventDefault.

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

更新2:如果要禁用所有事件处理程序(以及在绑定处理程序之前附加的单击事件处理程序,则需要'破解'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:正如那里提到的(建议由FIR55TORM编辑,抱歉不能批准这个完全正确的编辑因为我来不及回顾):如果你使用jQuery 1.10.x,你需要添加一个下划线来访问'data'对象如下:

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

修改jQuery 1.10.x的小提琴:http://jsfiddle.net/nickolsky/kp74u/41/