Lista anidada de Jquery Mobile - ¿Ha desaparecido el botón Atrás?

Question

En la versión más reciente de jQuery Mobile, la forma de agregar un botón Atrás es agregar 'data-add-back-btn = "true"' a su div "página" general.

Esto funciona genial. Sin embargo, al ver un submenú de la lista anidada, el botón Atrás ya no está allí.

Al observar el código de salida, parece que lo que está sucediendo es que jquery mobile está ocultando su div original de "página" y creando uno nuevo (sin el atributo del botón Atrás configurado en verdadero).

no tengo una dirección URL de demostración en este momento, pero se puede ver el tema en acción en la página de demostración http://jquerymobile.com/test/docs/lists/lists-nested.html

Mi pregunta es, ¿hay algo que tengo que añadir, que le dirá que añadir una botón de retroceso para menús anidados? y si no, ¿hay alguna forma en que pueda hackear agregar automáticamente el atributo de botón de retroceso a todos los divs de "página"?

Apreciar cualquier ayuda sobre este tema.

Answer 1

Algo como esto debería ayudar:

$(':jqmData(url^=MYPAGEID)').live('pagebeforecreate', 
    function(event) { 
    $(this).filter(':jqmData(url*=ui-page)').find(':jqmData(role=header)') 
     .prepend('<a href="#" data-rel="back" data-icon="back">Back</a>') 
    }); 

Reemplazar MYPAGEID con el ID de la página que contiene la lista.

El evento se activará cuando la página secundaria se cree dinámicamente e insertará el botón Atrás como el primer elemento en el encabezado. Eso será recogido y mejorado cuando la magia de jQueryMobile se ejecute automáticamente después.

El filtrado es un poco extraño porque no se puede hacer referencia a la ui-page en el primer selector (que tropieza con la & en el data-url y parece que no se puede usar un filtro antes de la .live()) Sin este filtrado adicional que obtener el botón Atrás en la página principal también.

Answer 2

tenían el mismo problema, he aquí una solución:

Como botón de retroceso está desactivada por defecto, es necesario activarlo antes de cargar jQuery Mobile (y después de cargar jQuery):

<script type="text/javascript"> 
$(document).bind("mobileinit", function() { 
     $.mobile.page.prototype.options.addBackBtn = true; 
});  
</script> 

Ahora, como el botón de retroceso de jQuery tiene errores, a veces lo verá donde no debería estar. Para evitar esto, añada lo siguiente a su contenedor de página:

data-add-back-btn="false" 

Esto evitará que el botón de retroceso se confunda por la actualización de la página y mostrando donde no debería estar.

Answer 3

Tomando como referencia el ejemplo publicado anteriormente, así es como pude agregar el botón Atrás a mis listas anidadas.

Lo que estaba haciendo era agregar opcionalmente una lista de padres() cuando existían ciertas condiciones, y luego agregar child listview() solo cuando ciertos datos estaban disponibles.

Dependiendo de la situación, podría tener 0 - 5 listas de niños.

por ejemplo:

self.cont.append($("<ul id='addtlInfo' />")); 
self.loadMeds(self.cont.attr("id")); 
self.loadContacts(self.cont.attr("id")); 
self.loadDX(self.cont.attr("id")); 
$.mobile.page.prototype.options.addBackBtn = true; 

auto.cont es simplemente un DIV en la página donde anexo mis objetos jQuery.

Cada uno de los métodos .loadXXX se ve básicamente como el siguiente:

self.loadMeds = function (client_id) { 
    if (!$("#clientMeds").exists()) { 
     cw.ds.executeSQL("SELECT * FROM CLIENTS_MEDS WHERE client_id = ?", [client_id], self.appendMeds); 
    }; 
}; 

self.appendMeds = function (tx, r) { 
    var $meds = $("<li>Medications</li>"); 
    var $medlist = $("<ul />"); 
    var rs, meds, med = ""; 
    var m = 0; 
    if (r.rows.length > 0) { 

     for (var i = 0; i < r.rows.length; i++) { 
      rs = r.rows.item(i); 
      meds = rs.data.split("\n"); 

      for (var j = 0; j < meds.length; j++) { 
       med = med + meds[j] + "<br />"; 

       if (m == 2) { 
        $medlist.append($("<li>" + med + "</li>")); 
        med = ""; 
        m = -1; 
       }; 
       m++; 
      }; 

     }; 
    }; 
    $meds.append($medlist); 
    var $m = $("<ul id='clientMeds' />").append($meds); 
    $("#addtlInfo").append($("<li />").append($m)); 
    $("#clientMeds").listview(); 
}; 

Como se puede ver, una vez que añado cada lista de elementos secundarios, que llamo el método de vista de lista(). Esto dio como resultado una lista de padres con listas de niños separadas.

El problema había sido que, si hacía clic en alguno de los elementos en la vista de lista principal(), podía ver los elementos secundarios como se esperaba, pero no había forma de volver a la vista principal de la lista. Esto realmente se convirtió en un problema cuando estaba probando mi código en el iPad (ya que no hay un botón BACK nativo. Al menos en Droid, hay un botón de retroceso real).

Cuando intenté la primera corrección: data-add-back-btn = "true", esto no funcionó como se esperaba.

La segunda solución;

<script type="text/javascript"> 
$(document).bind("mobileinit", function() { 
     $.mobile.page.prototype.options.addBackBtn = true; 
});  
</script> 

Didnt seem a elegant to me desde que era página ancha. Estaba buscando solo realizar esta configuración SI realmente iba a haber una vista de lista anidada y me sorprendió gratamente cuando funcionó como se esperaba.