Knockout y jQuery mobile: casillas de verificación

Question

Estoy tratando de agregar dinámicamente la casilla de verificación y los elementos de etiqueta al documento. El elemento de casilla de verificación tiene el atributo de unión a datos de Knockout para unir su valor a un valor observable en el modelado ViewModel. Sin embargo, cuando intento peinar las casillas de verificación con jQuery Mobile ejecutando

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

Se eliminarán los atributos de unión a datos. Si echo de lado la línea anterior, los atributos de unión a datos se establecen correctamente y el enlace funciona.

¿Hay alguna manera de tener un estilo móvil jQuery y ataduras al mismo tiempo?

Estoy usando jQuery Mobile RC1 y Knockout 1.2.1.

Answer 1

También he encontrado este problema. Desafortunadamente, todas las sugerencias aquí no funcionaron para mí o tuvieron otros problemas. Así que he creado un enlace personalizado simple que funciona en todas las versiones de KO (incluyendo el último 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');
    }
};

Debe usarse así:

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

Vea un ejemplo de trabajo completo aquí:

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

Answer 2

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

Entonces puedes hacer algo como lo siguiente:

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

¡Espero que esto ayude!

Answer 3

Hay un problema con el uso de knockouts, la vinculación verificada predeterminada con objetos de estilo como lo hace jQuery Mobile. Tiene los mismos problemas que funciona el botón/botón de JQueryui. Hay una etiqueta sobre la casilla de verificación que indica lo que está sucediendo y no se actualiza correctamente a través de la vinculación verificación estándar.

Se discute en http://therunningprogrammer.blogspot.com/2011/10/how-to-use-jquery-uis-button-with.html.

Para usar Knockout directamente con estos objetos de estilo de JQuery Mobile, el código demostrado deberá modificarse para manejar el contexto DOM diferente. Publicaré una actualización del código cuando pueda tener algo de tiempo libre para hacerlo.

EDITAR

En Grupos de Google - Knockout, Luv2hike publicó una solución. Puedes verlo funcionando en http://jsfiddle.net/luv2hike/nrjbc/. Parece una solución de trabajo para su problema.

Answer 4

Creé un enlace simple que funciona con jQuery Mobile 1.2.0 y Knockout 2.2.1 y funciona con las casillas de verificación Mobile JQuery predeterminadas. Esta vinculación no tiene dependencia de los iconos personalizados o los estilos CSS de JQuery Mobile. También permite el uso de marcado de casilla de verificación normal en su HTML (<input type="checkbox" ... />) en lugar de usar un elemento de marcado alternativo como un div.

Aquí está el violín: http://jsfiddle.net/thedude458/52bax/

Nota: Actualmente, el ejemplo solo admite una sola casilla de verificación, no una lista, ya que eso es todo lo que actualmente necesito. También supone que la propiedad vinculada es una observable.

Answer 5

Aquí está mi código muy comentado en un controlador personalizado que construí para las casillas de verificación 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')
}
};