Knock-out et jQuery Mobile: Checkboxes

Question

Je suis en train d'ajouter dynamiquement des éléments de cases à cocher et l'étiquette au document. élément de case a Knockout attribut de données se lient à se lier à sa valeur à une valeur observable dans le ViewModel. Cependant, lorsque je tente de le style les cases à cocher avec jQuery Mobile en exécutant

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

attributs

données-bind seront supprimés. Si je quitte la ligne ci-dessus, des attributs de lier les données sont correctement réglées et les travaux de liaison.

Est-il possible d'avoir à la fois le style jQuery Mobile et les liaisons knock-out en même temps?

J'utilise jQuery Mobile 1.2.1 RC1 et knock-out.

Answer 1

J'ai également rencontré ce problème. Malheureusement, toutes les suggestions ici ne soit pas fonctionné pour moi ou eu d'autres problèmes. J'ai donc créé une coutume simple, liaison qui fonctionne dans toutes les versions de KO ( y compris la dernière version 3 ):

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

Doit être utilisé comme ceci:

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

Voir un exemple de travail complet ici:

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

Answer 2

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

Ensuite, vous pouvez faire quelque chose comme ce qui suit:

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

Espérons que cela va aider!

Answer 3

Il y a un problème avec l'utilisation par défaut de knock-out avec des objets vérifiés de liaison de style comme le fait jQuery mobile. Il a les mêmes problèmes que les fonctions des boutons de jQueryUI / Buttonset. Il y a une étiquette sur la case à cocher qui indique ce qui se passe et qu'il ne soit pas correctement mis à jour par KO vérifié liaison standard.

Il est discuté à http: //therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html .

Pour utiliser knock-out directement avec ces objets de style jQuery Mobile, le code démontré devra être modifié pour gérer le contexte différent DOM. Je vais poster une mise à jour du code quand je peux obtenir un peu de temps libre de le faire.

EDIT

Google Groupes - Knockout , luv2hike a posté une solution. Vous pouvez le voir travailler à http://jsfiddle.net/luv2hike/nrJBC/ . On dirait une solution de travail pour votre problème.

Answer 4

Je créé une liaison simple qui fonctionne avec jQuery Mobile 1.2.0 et 2.2.1 Knockout et fonctionne avec les cases mobiles par défaut jQuery. Cette liaison n'a pas de dépendance sur des icônes personnalisées ou des styles CSS de JQuery Mobile. Il permet également l'utilisation de balises case régulière dans votre code HTML (<input type="checkbox" ... />) par opposition à l'aide d'un élément de balisage comme un autre div.

Voici le violon: http://jsfiddle.net/thedude458/52baX/

Remarque: À l'heure actuelle, l'exemple ne supporte qu'une seule case à cocher, pas une liste, comme ce qui est tout ce que j'ai actuellement un besoin. Il suppose également que la propriété liée est observable.

Answer 5

Voici mon code fortement commenté un gestionnaire personnalisé I construit pour les cases à cocher jquery mobile:

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