淘汰赛启用绑定不起作用答案

【问题标题】：Knockout enable binding not working淘汰赛启用绑定不起作用
【发布时间】：2014-03-27 23:06:28
【问题描述】：

我无法让启用绑定在 Knockout JS 中工作。将 enabled 属性设置为 false，按钮不会被禁用，我仍然可以单击它。

<a  class="btn btn-xl btn-primary" 
    href="#" 
    role="button" 
    data-bind="enable: enabled, click: clicked, visible: isVisible">
        <i class="icon-only icon-ok bigger-130"></i>
</a>      

var ViewModel = function(){
    var self = this;

    self.enabled = ko.observable(false);
    self.isVisible = ko.observable(true);
    self.clicked = function(){
        alert('You clicked the button');
    };
};

$(function(){
    var model = new ViewModel();
    ko.applyBindings(model);
})

【问题讨论】：

标签： javascript jquery knockout.js

【解决方案1】：

Enable 绑定不适用于您想要的任何东西。

这对于输入、选择和文本区域等表单元素很有用它也适用于按钮。就像我的例子一样http://jsfiddle.net/5CbnH/1/

但它不适用于您的链接。您正在使用 twitter 引导程序，他们使用 css 类启用/禁用他们的“按钮”。所以你必须像这样使用css binding：

data-bind="css: { yourClass: enabled }"

检查引导程序中哪个类负责显示您的“按钮”并使用 css 绑定相应地修改您的代码。

【讨论】：

谢谢。我们得出了相同的结论，但您更快地到达了那里。
这是旧的，但小提琴需要在按钮的数据绑定上加上一个结束引号

【解决方案2】：

右：

启用
禁用

错误：

启用
禁用

确保使用disable 代替disabled 和enable 代替enabled。

<input type="text" data-bind="value: foo, enable: isEditing"/>   YES!!
<input type="text" data-bind="value: foo, enabled: isEditing"/>   NO!

容易犯错误:-)

【讨论】：

我至少每 2 个月忘记一次。

【解决方案3】：

对于可能在搜索中找到此内容的人：

我在使启用绑定也能正常工作时遇到了问题。我的问题是尝试使用复杂的表达式而不引用函数之类的可观察对象：

<input type="button" data-bind="enable:AreAllStepsVerified && IsFormEnabled, click:SubmitViewModel"/>

应该是：

<input type="button" data-bind="enable:AreAllStepsVerified() && IsFormEnabled(), click:SubmitViewModel"/>

见：https://stackoverflow.com/a/15307588/4230970

【讨论】：

非常感谢，这对我帮助很大。

【解决方案4】：

萨尔瓦多在回答中所说的话。

您必须了解，通过在目标 DOM 元素上放置 disabled 属性，淘汰赛中的 enabled 和 disabled 绑定起作用。现在，如果您查看 HTML 文档，您会注意到并非所有 HTML 元素都支持此属性。

实际上只有表单元素（例如<button>）可以。 <a> 没有。

【讨论】：

【解决方案5】：

我通过将锚标记更改为按钮来使其工作，不太确定为什么这使它工作，但它仍然工作。

更新fiddle。

<button  class="btn btn-xl btn-primary" 
    role="button" 
    data-bind="enable: enabled, click: clicked, visible: isVisible">
        <i class="icon-only icon-ok bigger-130"></i>
</button>

【讨论】：

这是因为a 没有禁用启用选项。您要么必须使用引导程序的 css（如我所建议的那样），要么将其设为真正的按钮（就像您在此处更改的那样）。