knockout.js Knockout启用绑定不起作用

w80xi6nr  于 2022-11-10  发布在  其他
关注(0)|答案(5)|浏览(132)

我无法在Knockout JS中启用绑定。如果将enabled属性设置为false,按钮将不会被禁用,我仍然可以单击它。
请参阅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);
})
fcipmucu

fcipmucu1#

Enable绑定不适用于您需要的任何内容。
这对于input、select和textarea等表单元素很有用,它也适用于按钮。
但是它不适用于你的链接。你使用的是twitter引导程序,他们用css类启用/禁用他们的“按钮”。所以你必须像这样使用css binding

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

检查bootstrap中哪个类负责显示你的“按钮”,并相应地用css绑定修改你的代码。

qacovj5a

qacovj5a2#

右侧:

**启用

禁用**

错误:

**启用

禁用**
请确保使用disable而不是disabled,使用enable而不是enabled

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

容易犯的错误:-)

ctzwtxfj

ctzwtxfj3#

对于可能在搜索中找到此内容的用户:
我在使enable binding也能正常工作时遇到了一个问题。我的问题是试图使用一个复杂的表达式而不引用像函数这样的可观察对象:

<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

bnl4lu3b

bnl4lu3b4#

萨尔瓦多在他的回答中说。
您必须了解,敲除中的enableddisabled绑定是通过在目标DOM元素上放置一个disabled属性来工作的。现在,如果您查看HTML文档,您会注意到并非所有HTML元素都支持此属性。
实际上,只有表单元素(例如<button>)可以,<a>则不行。

vfwfrxfs

vfwfrxfs5#

我通过将锚标记更改为按钮来使它工作,不是很确定为什么这会使它工作,但它仍然工作。
更新了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>

相关问题