Knockout.js 启用单击绑定的条件

有没有办法为单击绑定指定启用条件？例如，如果我有以下内容：

<div data-bind="click: toggleDialog">Click Me</div>

点击我

如果出现指定的情况，我希望能够禁用单击，以便执行以下操作：

<div data-bind="click: toggleDialog, enableClick: myName() === 'John'">Click Me</div>

点击我

---

我在想，也许定制绑定可以解决这个问题，但并不完全确定如何去做。

我最近做了这项工作，并将条件检查放入单击函数本身，因此除非满足条件，否则它不会做任何事。然后，我还使用计算函数为元素提供css类，并根据元素是否会对单击做出反应来更改光标：

在我的视图模型中：

iconStyle = ko.computed(function () {
    var cssClass = 'DefaultClass';
     if (/*condition to check if click is valid*/) {
        cssClass = cssClass + ' Off';
     }

    return cssClass;
})

然后像这样绑定：

<div class="stepIcon" data-bind="click: clickFunction, css: iconStyle"></div>

---

Kyle，在阅读了你对nemsev的评论后，我相信你想禁用按钮，而不是对话框功能

装订

<button data-bind="click: doAlert, enable: allowAlert">Open Dialog</button>
<div data-bind="click: doAlert">Click me for another call to trigger the dialog</div>
<button data-bind="click: toggleAllowAlert, text: allowButtonText"></button>

---

您可以使用我为锚做的这种方法

更多详情：

---

实际上，它比这些选项都简单。您不能使绑定有条件，但可以使触发的函数有条件。只需在绑定中使用条件：

<div data-bind="click: myName() === 'John' ? toggleDialog : function(){ /* Nothing Happens */}">Click Me</div>

或具有响应未满足条件而运行的另一个功能：

<div data-bind="
    disabled: myName() !== 'John',
    click: myName() === 'John' ? toggleDialog : tellUserTheyAreWrong
">Click Me</div>

点击我

---

希望这有帮助

为什么不用check

myName（）==='John'

启动

toggleDialog

函数呢？是的，这是可能的。我从代码中的其他地方调用了我的toggleDialog函数，我希望这些调用能够正常工作，即使

myName（）！='约翰'

。我试图避免添加一个

clickToggleDialog

函数，该函数随后调用

toggleDialog

if

myName（）==='John'

，但这可能是最好的解决方案。凯尔，在这种情况下，您希望禁用按钮，而不是对话框函数。请看下面我的答案。谢谢。这适用于

按钮

。不幸的是，在我的例子中，由于一些基于UI框架的限制，我正在使用一个可点击的

div

。在这种情况下，相同的理论，但不同的实现。“enable”绑定在div上不起作用，但您仍然希望只禁用div的click处理程序，而不禁用dialog函数本身。这样，您的其他代码仍然可以启动对话框。谢谢！我对它进行了一些清理，并在DisableComputed中添加了disposeWhenNodeIsRemoved。请参阅editNote：如果条件不是简单的可观察条件（如“enable:myCount（）>3”），则禁用的css属性将不会更新。此外，您可能希望删除element.tagName==“DIV”条件，以便它在其他元素（如我的意思是，如果条件像这样放入html中，禁用的css属性将不会更新：好的，首先不应该在视图中放入逻辑，这就是为什么要使用viewmodel。无论如何，如果您想要这种行为，您需要覆盖enable绑定并将css逻辑放在那里

<div data-bind="click: myName() === 'John' ? toggleDialog : function(){ /* Nothing Happens */}">Click Me</div>

<div data-bind="
    disabled: myName() !== 'John',
    click: myName() === 'John' ? toggleDialog : function(){ /* Nothing Happens */}
">Click Me</div>

<div data-bind="
    disabled: myName() !== 'John',
    click: myName() === 'John' ? toggleDialog : tellUserTheyAreWrong
">Click Me</div>