Knockout e jQuery Mobile: Caselle di controllo

Question

Sto cercando di aggiungere dinamicamente elementi casella di controllo e di etichette per il documento. elemento Casella di controllo ha attributo data-bind di Knockout di legare il suo valore a un valore osservabile nel ViewModel. Tuttavia quando provo a stile le caselle con jQuery Mobile eseguendo

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

saranno rimossi gli attributi

??data-bind. Se lascio la linea di cui sopra, i dati-bind attributi sono impostati correttamente e le opere di legame.

C'è un modo per avere sia lo stile jQuery Mobile e attacchi Knockout allo stesso tempo?

Sto usando jQuery Mobile RC1 e Knockout 1.2.1.

Answer 1

Ho anche riscontrato questo problema. Purtroppo, tutti i suggerimenti qui o non ha funzionato per me o ha avuto altri problemi. Così ho creato un semplice legame che le opere in tutte le versioni di KO personalizzati ( tra cui l'ultima 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');
    }
};

Dovrebbe essere usato in questo modo:

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

Vedere un esempio di lavoro completo qui:

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

Answer 2

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

Poi si può fare qualcosa di simile al seguente:

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

Spero che questo vi aiuterà!

Answer 3

C'è un problema con l'utilizzo di fori di default controllato vincolante con oggetti in stile come jQuery Mobile fa. Ha gli stessi problemi che i pulsanti / funzioni buttonset di jQueryUI. C'è un'etichetta sopra la casella di controllo che indica ciò che sta accadendo e che non venga aggiornato correttamente tramite eliminazione diretta di serie controllata vincolante.

Si è discusso a http: //therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html .

Per usare eliminazione diretta direttamente con questi oggetti dallo stile di jQuery Mobile, il codice ha dimostrato dovrà essere modificato per gestire il contesto DOM diverso. Vi posto un aggiornamento del codice quando posso ottenere un po 'di tempo libero per farlo.

Modifica

Google Gruppi - Knockout , luv2hike ha postato una soluzione. Lo si può vedere lavorare a http://jsfiddle.net/luv2hike/nrJBC/ . Si presenta come una soluzione che lavora per il vostro problema.

Answer 4

Ho creato un semplice legame che funziona con jQuery Mobile 1.2.0 e 2.2.1 Knockout e funziona con le caselle di controllo i telefoni di default jQuery. Questo legame non ha dipendenze da icone personalizzate o stili CSS di jQuery Mobile. Esso permette anche l'utilizzo di regolare marcatura casella di controllo nel codice HTML (<input type="checkbox" ... />) rispetto all'utilizzo di un elemento di markup alternativo come un div.

Ecco il violino: http://jsfiddle.net/thedude458/52baX/

Nota: Al momento, l'esempio supporta un solo casella di controllo, non una lista, come questo è tutto quello che attualmente hanno bisogno di. Si presuppone inoltre che la proprietà bound è un osservabile.

Answer 5

Ecco il mio codice pesantemente commentato un gestore personalizzato ho costruito per caselle di controllo 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')
}
};