このカスタムバインディングを使用してアンカータグを無効および有効にするにはどうすればよいですか。これは入力要素でうまく機能しますが、アンカータグは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を使用している場合は、アクセスするためにアンダースコアを追加する必要があります'data'オブジェクトは次のようになります。
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);
};
ネイティブクリックとシームレスで、バインディングを有効にします（バインディングを無効にしません）Fiddle（Fiddleは設定より規約も使用します） 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;
}