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元素上放置disabled屬性來理解knockout中的enabled和disabled綁定。 現在，如果您查看HTML文檔，您會注意到並非所有HTML元素都支持此屬性。

實際上只有表單元素（例如<button> ）。 <a>沒有。

Answer 5

我通過將錨標記更改為按鈕來實現它，並不確定為什么這會使它工作，但它仍然有效。

更新了小提琴 。

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