Нокаут и jQuery Mobile: флажки

Question

Я пытаюсь динамически добавить флажок и элементы метки в документ. Элемент флага имеет атрибут связывания данных нокаутом, чтобы привязать его значение с наблюдаемым значением в ViewModel. Однако, когда я пытаюсь стилизовать флажки с jQuery Mobile, выполняя

$('input[type="checkbox"]').checkboxradio();

Атрибуты связывания данных будут удалены. Если я оставляю вышеупомянутую строку, атрибуты связывания данных правильно устанавливаются, а привязка работает.

Есть ли способ одновременно иметь как мобильный стиль jQuery, так и нокаутные привязки?

Я использую jQuery Mobile RC1 и нокаут 1.2.1.

Answer 1

Я также столкнулся с этой проблемой. К сожалению, все предложения здесь либо не работали для меня, либо имели другие проблемы. Итак, я создал простой пользовательскую привязку, которая работает во всех версиях КО (в том числе последний V3):

ko.bindingHandlers.jqmChecked = {
    init: ko.bindingHandlers.checked.init,
    update: function (element, valueAccessor) {
        //KO v3 and previous versions of KO handle this differently
        //KO v3 does not use 'update' for 'checked' binding
        if (ko.bindingHandlers.checked.update) 
            ko.bindingHandlers.checked.update.apply(this, arguments); //for KO < v3, delegate the call
        else 
            ko.utils.unwrapObservable(valueAccessor()); //for KO v3, force a subscription to get further updates

        if ($(element).data("mobile-checkboxradio")) //calling 'refresh' only if already enhanced by JQM
            $(element).checkboxradio('refresh');
    }
};

Следует использовать так:

<input type="checkbox" data-bind="jqmChecked: someValue" id="checkbox1"/>

Смотрите полный рабочий пример здесь:

http://jsfiddle.net/srgstm/ub6sq/

Answer 2

Видеть: https://gist.github.com/1006808

Тогда вы можете сделать что -то вроде следующего:

var $checkbox = $('input[type="checkbox"]');
$checkbox.checkboxradio();
$checkbox.dataBind({
    your options..
});

Надеюсь, это поможет!

Answer 3

Существует проблема с использованием проверенной привязки нокаутов по умолчанию с такими стилизованными объектами, как JQUERY Mobile. У него есть те же проблемы, что и кнопка/пуговица кнопки Jqueryui. На флажке существует метка, которая указывает, что происходит, и она не обновляется должным образом с помощью стандартной проверки нокаута.

Это обсуждается в http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.

Чтобы использовать нокаут непосредственно с этими стилизованными объектами от JQUERY Mobile, продемонстрированный код должен быть изменен для обработки различного контекста DOM. Я опубликую обновление в код, когда смогу получить свободное время, чтобы сделать это.

РЕДАКТИРОВАТЬ

В Группы Google - нокаут, Luv2hike опубликовал решение. Вы можете увидеть, как это работает на http://jsfiddle.net/luv2hike/nrjbc/. Анкет Похоже на рабочее решение для вашей проблемы.

Answer 4

Я создал простую привязку, которая работает с JQUERY Mobile 1.2.0 и нокаутом 2.2.1 и работает с мобильными флажками JQUERY по умолчанию. Эта привязка не зависит от пользовательских значков или стилей CSS от JQUERY Mobile. Это также позволяет использовать регулярную разметку флажков в вашем HTML (<input type="checkbox" ... />) в отличие от использования альтернативного элемента разметки, подобного div.

Вот скрипка: http://jsfiddle.net/thedude458/52bax/

Примечание: В настоящее время пример поддерживает только один флажок, а не список, так как это все, для чего мне сейчас нужно. Это также предполагает, что связанное свойство является наблюдаемым.

Answer 5

Вот мой тщательно прокомментированный код на пользовательском обработчике, который я создал для флакторов jQueryMobile:

ko.bindingHandlers.checkbox = {
init: function(element, valueAccessor) {

    // set the dom element to a checkbox and initialize it (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio();
    checkbox.attr('type', 'checkbox');

    // register change event to update the model on changes to the dom
    ko.utils.registerEventHandler(element, "change", function() {
        valueAccessor()(

            // off because it is before the ui has refreshed
            $(this).siblings('label.ui-checkbox-off').length > 0
        );
    });
},
update: function(element, valueAccessor) {

    // update the checked binding, i.e., check or uncheck the checkbox
    ko.bindingHandlers.checked.update(element, valueAccessor)

    // and refresh the element (for jquerymobile)
    var checkbox = $(element);
    checkbox.checkboxradio('refresh')
}
};