Knockout使绑定无法正常工作

Question

我无法让启用绑定在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);
})          

Answer 1

启用绑定不适用于您想要的任何内容.

这对于输入,选择和textarea等表单元素很有用.它也适用于按钮.就像我的例子http://jsfiddle.net/5CbnH/1/

但它不适用于您的链接.你正在使用twitter bootstrap,他们使用css类启用/禁用他们的"按钮".所以你必须像这样使用css绑定:

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

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

Answer 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!

此示例用于文本框.容易犯错:-)

Answer 3

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

我在启用启用绑定时遇到了问题.我的问题是尝试使用复杂的表达式而不引用像函数这样的observable:

<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

Answer 4

萨尔瓦多在回答中说.

你必须通过在目标DOM元素上放置一个属性来理解敲除中的enabled和disabled绑定disabled.现在,如果您查看HTML文档,您会注意到并非所有HTML元素都支持此属性.

实际上只有表单元素(例如<button>).<a>才不是.