Knockout und JQuery Mobile: Kontrollkästchen

Question

Ich versuche, dem Dokument das Kontrollkästchen und Beschriftung von Elementen dynamisch hinzuzufügen. Das Kontrollkästchen Element hat das Datenbindungsattribut von Knockout, um seinen Wert an einen beobachtbaren Wert im ViewModel zu binden. Wenn ich jedoch versuche, die Kontrollkästchen mit Jquery Mobile durch Ausführung zu stylen

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

Datenbindungsattribute werden entfernt. Wenn ich die obige Zeile herauslasse, werden die Datenbindungsattribute ordnungsgemäß eingestellt und die Bindung funktioniert.

Gibt es eine Möglichkeit, sowohl JQuery Mobile Styling- als auch Knockout -Bindungen gleichzeitig zu haben?

Ich verwende Jquery Mobile RC1 und Knockout 1.2.1.

Answer 1

Ich bin auch auf dieses Problem gestoßen. Leider funktionierten alle Vorschläge hier entweder nicht für mich oder hatten andere Probleme. Deshalb habe ich eine einfache benutzerdefinierte Bindung erstellt, die in allen Versionen von KO funktioniert (einschließlich der neuesten 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');
    }
};

Sollte so verwendet werden:

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

Sehen Sie hier ein vollständiges Arbeitsbeispiel:

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

Answer 2

Sehen: https://gist.github.com/1006808

Dann können Sie so etwas wie Folgendes tun:

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

Hoffe das wird helfen!

Answer 3

Es gibt ein Problem bei der Verwendung von Knockouts standardmäßig überprüftes Bindung mit gestalteten Objekten wie Jquery Mobile. Es hat die gleichen Probleme wie die Schaltfläche von JQueryui/Schaltflächen. Es gibt ein Etikett über das Kontrollkästchen, das angibt, was passiert, und es wird nicht ordnungsgemäß über ein Standard -Knockout -Check -Bindung aktualisiert.

Es wird bei besprochen http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.

Um Knockout direkt mit diesen gestalteten Objekten von JQuery Mobile zu verwenden, muss der nachgewiesene Code geändert werden, um den unterschiedlichen DOM -Kontext zu verarbeiten. Ich werde ein Update für den Code veröffentlichen, wenn ich Freizeit dafür bekommen kann.

BEARBEITEN

Im Google -Gruppen - Knockout, luv2hike hat eine Lösung gepostet. Sie können sehen, dass es funktioniert http://jsfiddle.net/luv2hike/nrjbc/. Sieht aus wie eine funktionierende Lösung für Ihr Problem.

Answer 4

Ich habe eine einfache Bindung erstellt, die mit JQuery Mobile 1.2.0 und Knockout 2.2.1 funktioniert, und arbeitet mit Standard -JQuery -Kontrollkästchen Mobile. Diese Bindung hat keine Abhängigkeit von benutzerdefinierten Symbolen oder den CSS -Stilen von JQuery Mobile. Es ermöglicht auch die Verwendung des regulären Kontrollkästchen -Markups in Ihrem HTML (<input type="checkbox" ... />) im Gegensatz zur Verwendung eines alternativen Markup -Elements wie a div.

Hier ist die Geige: http://jsfiddle.net/thedude458/52bax/

Notiz: Derzeit unterstützt das Beispiel nur ein einziges Kontrollkästchen, nicht eine Liste, da dies alles ist, was ich derzeit benötigt. Es wird auch davon ausgegangen, dass die gebundene Eigenschaft ein beobachtbares ist.

Answer 5

Hier ist mein stark kommentierter Code in einem benutzerdefinierten Handler, den ich für JQueryMobile -Kontrollkästchen erstellt habe:

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')
}
};