如何使用此自定义绑定禁用和启用锚标记。它适用于输入元素，但锚标记只是更改 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);
}
};
您需要在绑定处理程序中捕获单击事件。
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)});
</p>
这是一个工作示例：
更新 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，则需要添加下划线才能访问像这样的“数据”对象：
var events = $._data(element, "events");
jQuery 1.10.x 的修订小提琴：http: //jsfiddle.net/nickolsky/kp74u/41/
我在寻找一种方法时找到了这个答案，但我不喜欢这种方法，我自己的方法也是如此
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(function () {
return ko.utils.unwrapObservable(allBindingsAccessor().enable) === false;
});
ko.applyBindingsToNode(element, { css: { disabled: disabled} });
var handler = valueAccessor();
valueAccessor = function () {
return function () {
if (ko.utils.unwrapObservable(allBindingsAccessor().enable)) {
handler.apply(this, arguments);
}
}
};
}
orgClickInit(element, valueAccessor, allBindingsAccessor, viewModel);
};
它与本机点击无缝并启用绑定（禁用绑定未实现）小提琴（小提琴也使用我的约定而不是配置库） http://jsfiddle.net/xCfQC/30/
使用@Anders 的答案作为灵感，我想出了我自己的版本。允许在有或没有“点击”的情况下使用“启用”、“禁用”。还允许自定义禁用类，否则默认为“禁用”。
var koEnableUpdateOrig = ko.bindingHandlers.enable.update;
ko.bindingHandlers.enable.update = function (element, valueAccessor, allBindings) {
// call original enable update
var result = koEnableUpdateOrig.apply(this, arguments);
var enabled = ko.unwrap(valueAccessor());
// get and apply disabled class
var disabledClass = "disabled";
if (allBindings)
disabledClass = allBindings().disabledClass || "disabled";
if (enabled) {
$(element).removeClass(disabledClass);
if (element.tagName === "A")
$(element).off("click.koEnableUpdate");
}
else {
$(element).addClass(disabledClass);
if (element.tagName === "A")
$(element).on("click.koEnableUpdate", function (e) { e.preventDefault(); });
}
return result;
};
ko.bindingHandlers.disable.update = function (element, valueAccessor, allBindings) {
// call enable with the reverse value
// the original knockout disable does this, but does not pass the allBindings
ko.bindingHandlers.enable.update(element, function () {
return !ko.unwrap(valueAccessor())
}, allBindings);
};
var koClickInitOrig = ko.bindingHandlers.click.init;
ko.bindingHandlers.click.init = function (element, valueAccessor, allBindings) {
// wrap click function with enable/disable check
var valueAccessorOrig = valueAccessor();
valueAccessor = function () {
return function () {
if (ko.unwrap(allBindings().enable) ||
(allBindings().disable == null || !ko.unwrap(allBindings().disable))) {
valueAccessorOrig.apply(this, arguments);
}
}
};
// apply wrapped click to original click init
koClickInitOrig.apply(this, arguments);
};
这是我的方法：
JavaScript
(function () {
var originalDisableUpdate = ko.bindingHandlers.disable.update;
ko.bindingHandlers.disable.update = function (element, valueAccessor) {
if (element.tagName === 'A') {
var
value = ko.utils.unwrapObservable(valueAccessor()),
disabled = 'disabled';
if (value) {
element.setAttribute(disabled, null);
}
else {
element.removeAttribute(disabled);
}
}
else {
originalDisableUpdate(element, valueAccessor);
}
};
})();
CSS
a[disabled] {
pointer-events:none;
cursor:default;
}