Knockout и jQuery Mobile: флажки

Question

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

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

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

Можно ли одновременно использовать стили для jQuery Mobile и привязки Knockout?

Я использую jQuery Mobile RC1 и Knockout 1.2.1.

Answer 1

Я также столкнулся с этой проблемой. К сожалению, все предложения здесь или не работали для меня или имели другие проблемы. Поэтому я создал простую настраиваемую привязку, которая работает во всех версиях KO (, включая последнюю версию 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

Существует проблема с использованием привязки по умолчанию для проверенных привязок со стилизованными объектами, как это делает jQuery mobile. Он имеет те же проблемы, что и функции Button / Buttonset в jQueryUi. Над флажком есть метка, указывающая, что происходит, и она не обновляется должным образом через стандартную привязку с проверкой на выбывание.

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

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

EDIT

В Google Groups - Knockout , luv2hike опубликовал решение. Вы можете видеть, что это работает на http://jsfiddle.net/luv2hike/nrJBC/. Похоже, что исправление вашей проблемы.

Answer 3

См .: https://gist.github.com/1006808

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

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

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

Answer 4

Вот мой строго прокомментированный код для пользовательского обработчика, который я создал для флажков 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')
}
};

Answer 5

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

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

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