Knockout disable binding не работает с jQuery ui button

Question

Я использую нокаут disable привязка к jQuery ui button. Когда я использовал data-bind='disable: ture' на любой кнопке, на которой применен плагин jquery ui button, он отключает эту кнопку, но ее внешний вид не установлен как отключенный. Здесь я создал пример скрипку:

http://jsbin.com/arotuh/2/edit

Что мне не хватает?

Answer 1

Похоже, что когда вы используете кнопку jqueryui, она переопределяет поведение атрибутов по умолчанию (так как в нем они контролируют их, но не уверены, как это возможно, возможно, потребуется изучить его дальше).

Однако, я был в состоянии получить его на работу изменения порядка:

ko.applyBindings(); 

$("button").eq(0).button(); 

$("button").eq(1).button({ disabled: true }); 

Чтобы получить две библиотеки, чтобы играть хорошо вы могли бы также написать custom bindings.

Answer 2

Как отметил spullen, вот как я хотел бы сделать с помощью пользовательских привязок:

ko.bindingHandlers.jqButton = { 
    init: function (element, valueAccessor, allBindingsAccessor) { 
     var options = valueAccessor(); 
     for (var p in options) { 
      options[p] = ko.utils.unwrapObservable(options[p]); 
     } 
     $(element).button(options); 
     ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
      $(element).button("destroy"); 
     }); 
    }, 
    update: function (element, valueAccessor) { 
     var options = valueAccessor(); 
     for (var p in options) { 
      options[p] = ko.utils.unwrapObservable(options[p]); 
     } 
     $(element).button("option", options); 
     $(element).button("refresh"); 
    } 
}; 
ko.applyBindings({ 
    flag: ko.observable(true) 
}); 

И в HTML:

<button data-bind="jqButton: {disabled: flag} ">Disable state using knockout disable binding</button> 

Answer 3

я хотел бы остановиться на примере GBS (который работает довольно неплохо), добавив поддержку использования наблюдаемых параметров jQuery ui (например, отключенный отображается на наблюдаемый, а не только на true или false).

ko.bindingHandlers.jqButton = { 
init: function (element, valueAccessor, allBindingsAccessor) { 
    var options = valueAccessor(); 
    for (var p in options) { 
     // CHANGE STARTS HERE 
     if (ko.isObservable(options[p])) 
      options[p].subscribe(function (newValue) { 
       $(element).button("option", p, newValue); 
       $(element).button("refresh"); 
      }); 
     // CHANGE ENDS HERE 
     options[p] = ko.utils.unwrapObservable(options[p]); 
    } 
    $(element).button(options); 
    ko.utils.domNodeDisposal.addDisposeCallback(element, function() { 
     $(element).button("destroy"); 
    }); 
}, 
update: function (element, valueAccessor) { 
    var options = valueAccessor(); 
    for (var p in options) { 
     options[p] = ko.utils.unwrapObservable(options[p]); 
    } 
    $(element).button("option", options); 
    $(element).button("refresh"); 
} 

};