禁用具有淘汰条件的悬停
Disable hover with knockout condition
我有一个看起来像这样的按钮:
<button data-bind="enable: valid, css:{'btn-primary': valid() === true}">
我想在相同条件下禁用 valid() === true
。本质上,当我的函数等于 true
使用敲除绑定时,我想添加 pointer-events: none
。
您的标题是 "disable hover",但问题(从之前的 PO 评论中提取)提到想要添加 pointer-events
css 值。我假设后者是最后的指示。
根据@SivanrajM 的评论,最明智的做法是 class 即 enabled/disabled。例如:
ko.applyBindings({ valid: ko.observable(true) });
// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<button data-bind="enable: valid,
css: { 'btn-primary': valid,
'no-ptr-evts': valid }">
(try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>
我不清楚您为什么要(根据您的问题)在 valid() === true
时禁用指针事件,但是嘿:这取决于您!
请注意,我已将 valid() === true
缩减为 valid
,这是等效的。
顺便说一句,如果您想跳过创建单独的 class 并执行内联样式的 knockout-analogy,请使用 the style
binding:
ko.applyBindings({ valid: ko.observable(true) });
// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<button data-bind="enable: valid,
css: { 'btn-primary': valid },
style: { 'pointer-events': valid() ? 'none' : 'auto' }">
(try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>
我有一个看起来像这样的按钮:
<button data-bind="enable: valid, css:{'btn-primary': valid() === true}">
我想在相同条件下禁用 valid() === true
。本质上,当我的函数等于 true
使用敲除绑定时,我想添加 pointer-events: none
。
您的标题是 "disable hover",但问题(从之前的 PO 评论中提取)提到想要添加 pointer-events
css 值。我假设后者是最后的指示。
根据@SivanrajM 的评论,最明智的做法是 class 即 enabled/disabled。例如:
ko.applyBindings({ valid: ko.observable(true) });
// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<button data-bind="enable: valid,
css: { 'btn-primary': valid,
'no-ptr-evts': valid }">
(try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>
我不清楚您为什么要(根据您的问题)在 valid() === true
时禁用指针事件,但是嘿:这取决于您!
请注意,我已将 valid() === true
缩减为 valid
,这是等效的。
顺便说一句,如果您想跳过创建单独的 class 并执行内联样式的 knockout-analogy,请使用 the style
binding:
ko.applyBindings({ valid: ko.observable(true) });
// For demo purposes:
document.querySelector("button").addEventListener("click", function() {
alert("clicked!");
});
.btn-primary { text-transform: uppercase; }
.no-ptr-evts { pointer-events: none; color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<button data-bind="enable: valid,
css: { 'btn-primary': valid },
style: { 'pointer-events': valid() ? 'none' : 'auto' }">
(try to) click me
</button>
<hr>
<label><input type="checkbox" data-bind="checked: valid"> `valid`</label>