javascript 淘汰赛启用绑定不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22701074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Knockout enable binding not working
提问by Th4t Guy
I can't get the enable binding to work in Knockout JS. With the enabled property set to false, the button is not disabled and I can still click it.
我无法使启用绑定在 Knockout JS 中工作。将 enabled 属性设置为 false 时，按钮不会被禁用，我仍然可以单击它。
see fiddle
看小提琴
<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);
})
回答by Salvador Dali
Enablebinding does not work with anything you want.
启用绑定不适用于您想要的任何内容。
This is useful with form elements like input, select, and textarea It also works with buttons. Like in my example http://jsfiddle.net/5CbnH/1/
这对于输入、选择和文本区域等表单元素很有用，它也适用于按钮。就像我的例子http://jsfiddle.net/5CbnH/1/
But it does not work with your link. You are using twitter bootstrap and they enable/disable their "buttons" with css classes. So you have to use css bindinglike this:
但它不适用于您的链接。您正在使用 twitter bootstrap，他们使用 css 类启用/禁用他们的“按钮”。所以你必须像这样使用css 绑定：
data-bind="css: { yourClass: enabled }"
Check what class is responsible in bootstrap for showing your "button" and modify your code accordingly with css binding.
检查引导程序中哪个类负责显示您的“按钮”，并使用 css 绑定相应地修改您的代码。
回答by Simon_Weaver
Right:
对：
enable
disable
启用
禁用
Wrong:
错误的：
enabled
disabled
启用
禁用
Make sure you use disableinstead of disabledand enableinstead of enabled.
确保您使用disable代替disabled和enable代替enabled。
<input type="text" data-bind="value: foo, enable: isEditing"/> YES!!
<input type="text" data-bind="value: foo, enabled: isEditing"/> NO!
Easy mistake to make :-)
容易犯的错误:-)
回答by R. Salisbury
For people who might find this in a search:
对于可能会在搜索中找到此内容的人：
I had a problem getting the enable binding to work as well. My problem was trying to use a complex expression without referencing the observables like functions:
我在使启用绑定也起作用时遇到了问题。我的问题是尝试使用复杂的表达式而不引用像函数这样的可观察对象：
<input type="button" data-bind="enable:AreAllStepsVerified && IsFormEnabled, click:SubmitViewModel"/>
Should have been:
本来应该：
<input type="button" data-bind="enable:AreAllStepsVerified() && IsFormEnabled(), click:SubmitViewModel"/>
回答by jods
What Salvador said in his answer.
萨尔瓦多在他的回答中说了什么。
You must understand that the enabledand disabledbinding in knockout work by putting a disabledattribute on the target DOM element. Now if you look at the HTML documentation you'd notice that not all HTML element support this attribute.
您必须了解淘汰赛中的enabled和disabled绑定通过disabled在目标 DOM 元素上放置一个属性来工作。现在，如果您查看 HTML 文档，您会注意到并非所有 HTML 元素都支持此属性。
Actually only form elements (e.g. <button>) do. <a>does not.
实际上只有表单元素（例如<button>）可以。<a>才不是。
回答by Th4t Guy
I got it to work by changing the anchor tag to a button, not really sure why this makes it work, but it works nonetheless.
我通过将锚标记更改为按钮来使其工作，不太确定为什么会这样，但它仍然有效。
Updated 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>
