Нокаут разрешает привязку не работать

Я не могу заставить привязку enable работать в 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);
})

Ответы

Ответ 1

Enable привязка не работает ни с чем.

Это полезно с элементами формы, такими как input, select и textarea Он также работает с кнопками. Как в моем примере http://jsfiddle.net/5CbnH/1/

Но это не работает с вашей ссылкой. Вы используете twitter bootstrap и включаете/выключаете свои "кнопки" с помощью классов css. Таким образом, вы должны использовать привязку css следующим образом:

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

Проверьте, какой класс отвечает за загрузку, чтобы показать ваш "button" и соответствующим образом изменить ваш код с помощью 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!

Легкую ошибку сделать :-)

Ответ 3

Для тех, кто может найти это в поиске:

У меня возникла проблема с тем, что привязка enable также работает. Моя проблема заключалась в том, чтобы использовать сложное выражение без ссылки на наблюдаемые функции:

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

Должно быть:

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

Смотрите: fooobar.com/questions/181331/...

Ответ 4

Что сказал Сальвадор в своем ответе.

Вы должны понимать, что привязка enabled и disabled в нокауте работает, помещая атрибут disabled в целевой элемент DOM. Теперь, если вы посмотрите на документацию 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>