Связанные проблемы с нокаутом и jQuery Mobile

Question

ОБНОВЛЕНИЕ: Третья пуля ниже («так что я пробовала следующий раздел») является ближайшим, я пришел к исправлению. I думаю Мне в основном нужно 1) отключить кнопку, 2) добавить ui-disable, 3) обновить jqm, все в рамках привязки данных или модели.

Я пытаюсь получить один из нокаутов demos, чтобы работать с jqm, чтобы создать что-то подобное в моем проекте. Он работает главным образом, за исключением того, что кнопка отправки не отключена. отключен, но не отображается серым цветом, если элементы = 0.

Если вы удалите jqm, пример отлично работает, и кнопка станет серым. Я понимаю, что jqm может конфликтовать с нокаутом из-за йот манипуляции, так что я попытался следующие:

• Запуск обновления стиля в методах модели: $('button').button(); или $('.ui-page-active').page('destroy').page();
• Начиная связывания после pageinit. Это сломало все.

• В качестве теста я попробовал привязку данных для установки ui-disable вместо отключения кнопки. Он применяет класс, но jqm нуждается в обновлении как-то. Могу ли я поместить код в привязку данных для обновления?

  <button data-bind="css: {'ui-disable': gifts().length > 0}" type='submit'>Submit</button>

Вот скрипка я использовал для устранения этого: http://jsfiddle.net/wtjones/wkEgn/

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

<form action='/someServerSideHandler'> 
    <p>You have asked for <span data-bind='text: gifts().length'>&nbsp;</span> gift(s)</p> 
    <table data-bind='visible: gifts().length > 0'> 
     <thead> 
      <tr> 
       <th>Gift name</th> 
       <th>Price</th> 
       <th /> 
      </tr> 
     </thead> 
     <tbody data-bind='foreach: gifts'> 
      <tr> 
       <td><input class='required' data-bind='value: name, uniqueName: true' /></td> 
       <td><input class='required number' data-bind='value: price, uniqueName: true' /></td> 
       <td><a href='#' data-bind='click: $root.removeGift'>Delete</a></td> 
      </tr> 
     </tbody> 
    </table> 

    <button data-bind='click: addGift'>Add Gift</button> 
    <button data-bind='enable: gifts().length > 0' type='submit'>Submit</button> 
</form> 

Код модели:

var GiftModel = function(gifts) { 
    var self = this; 
    self.gifts = ko.observableArray(gifts); 

    self.addGift = function() { 
     self.gifts.push({ 
      name: "", 
      price: "" 
     });  
    }; 

    self.removeGift = function(gift) { 
     self.gifts.remove(gift);     
    }; 

    self.save = function(form) { 
     alert("Could now transmit to server: " + ko.utils.stringifyJson(self.gifts)); 
     // To actually transmit to server as a regular form post, write this: ko.utils.postJson($("form")[0], self.gifts); 
    }; 
}; 

var viewModel = new GiftModel([ 
    { name: "Tall Hat", price: "39.95"}, 
    { name: "Long Cloak", price: "120.00"} 
]); 
ko.applyBindings(viewModel); 

// Activate jQuery Validation 
//$("form").validate({ submitHandler: viewModel.save }); 

Answer 1

Угу. Если вы измените свойства кнопки с помощью JS (или используете KO для изменения этих реквизитов), вы должны вызвать метод обновления для обновления визуального стиля.

$('button').button('refresh'); 

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

ko.bindingHandlers.mobileEnable = { 
    update: function(el) { 
     ko.bindingHandlers.enable.update.apply(el, arguments); 
     $.fn.button && $(el).button('refresh'); 
    } 
} 

и ...

<button data-bind='mobileEnable: gifts().length > 0' type='submit'>Submit</button> 

Исправленная скрипку: http://jsfiddle.net/wkEgn/2/