与淘汰赛条件

Question

禁用悬停我有一个按钮，看起来像这样：

<button data-bind="enable: valid, css:{'btn-primary': valid() === true}"> 

我想禁用与相同条件valid() === true。实质上，我想添加pointer-events: none当我的功能等于true使用敲除绑定。

Answer 1

您的标题显示“禁用悬停”，但问题（从之前的PO评论中淡化）提及想要添加一个pointer-events css值。我会假定后者是最后的指示。

按照@ SivanrajM的评论，最合理的方法是启用/禁用类。例如：

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，这相当于。

顺便说一句，如果你想跳过创建一个单独的班级，做的内嵌样式淘汰赛类比，用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>