KnockoutJS радиокнопка проверена привязка, которая работает с JQuery Mobile 1.4?

Question

Я пытался выяснить, как получить проверочное обязательство для работы с Knockout и JQuery Mobile. По какой-то причине ванильный нокаут JS «проверенный» переплет не работает:

<fieldset data-role="controlgroup"> 
    <legend>Your favorite flavor:legend> 
    <input type="radio" name="flavor-selection" value="Chocolate" id="flavor-selection-chocolate" data-bind="checked: flavor" /> 
    <label for="flavor-selection-chocolate">Normal</label> 
    <input type="radio" name="flavor-selection" value="Vanilla" id="flavor-selection-vanilla" data-bind="checked: flavor" /> 
    <label for="flavor-selection-vanilla">Party</label> 
</fieldset> 

Любые идеи, почему?

Answer 1

Оказалось, что jQuery Mobile стирает метку для переключателя, чтобы отображать радиоприемник (сокрытие собственно радиокнопки).

Я попробовал предложение, которое можно найти здесь: http://codeclimber.net.nz/archive/2013/08/16/How-to-bind-a-jquery-mobile-radio-button-list-to.aspx, но не имел никакого успеха - я подозреваю, что он мог работать только с предыдущей версией jQuery Mobile.

Вот мой вариант:

Создание пользовательского связывания для переключения «UI-радио-на» и «UI-радио-офф» классы на этикетке в зависимости от проверяемого состояния скрытого флажка:

ko.bindingHandlers.jqMobileRadioChecked = { 
    init: function (element, valueAccessor, allBindingsAccessor, data, context) { 
     ko.bindingHandlers.checked.init(element, valueAccessor, allBindingsAccessor, data, context); 
    }, 
    update: function (element, valueAccessor, allBindingsAccessor, data, context) { 

     var viewModelValue = valueAccessor(); 
     var viewModelValueUnwrapped = ko.unwrap(viewModelValue); 

     var $el = $(element); 
     var $label = $el.siblings("label[for='" + $el.attr("id") + "']"); 
     if (viewModelValueUnwrapped === $el.val()) { 
      $label.removeClass("ui-radio-off"); 
      $label.addClass("ui-radio-on"); 
     } else { 
      $label.removeClass("ui-radio-on"); 
      $label.addClass("ui-radio-off"); 
     } 
    } 
}; 

Тогда HTML становится просто:

<fieldset data-role="controlgroup"> 
    <legend>Your favorite flavor:legend> 
    <input type="radio" name="flavor-selection" value="Chocolate" id="flavor-selection-chocolate" data-bind="jqMobileRadioChecked: flavor" /> 
    <label for="flavor-selection-chocolate">Normal</label> 
    <input type="radio" name="flavor-selection" value="Vanilla" id="flavor-selection-vanilla" data-bind="jqMobileRadioChecked: flavor" /> 
    <label for="flavor-selection-vanilla">Party</label> 
</fieldset>