jQuery Mobile presenta problemas con el contenido que se agrega después de que se inicializa la página

Estoy usando jQuery Mobile y Backbone JS para un proyecto. Funciona principalmente, utilizando el evento 'pagebeforeshow' de jQuery Mobile para activar la vista Backbone correcta. En la Vista Backbone para esa página particular de jQuery Mobile, ahí es donde está haciendo todas las cosas dinámicas necesarias. Algunas de las cosas que hacen las vistas es extraer ciertos bits utilizando el sistema de templates de Underscore.

Todo esto es genial hasta que estoy tirando bits de forma usando el sistema de templates. Por ejemplo, un set de botones de radio dynamics (que se generan a partir de una Colección Backbone). Estos botones de radio los quiero estilizar usando lo que jQuery Mobile tiene para ofrecer. Por el momento, jQuery Mobile no está recibiendo estos botones de radio inyectados dinámicamente. Resolví este problema previamente cuando hacía controles deslizantes simplemente llamando al widget de jQuery Mobile "slider ()" de nuevo y parecía actualizarlos … Esto no parece ser el caso con estos botones de opción.

En Backbone View, traté de llamar a los methods de widgets de nuevo:

$(this.el).find("input[type='radio']").checkboxradio(); $(this.el).find(":jqmData(role='controlgroup')").controlgroup(); 

Los probé al revés también, pero parece que necesito hacerlo de esta manera para que el estilo de agrupación funcione, etc. ¡Pero esto no parece correcto! … hacer esto también causó errores cuando hice clic en los botones de opción, diciendo: "no puedo llamar a los methods en la checkbox antes de la initialization, intenté llamar al método 'actualizar'"?

Parece que debería haber una forma en jQuery Mobile para reiniciar la página o algo así? Noté que hay un widget de 'página' en el código fuente.

¿Cómo maneja jQuery Mobile los formularios / elementos que se inyectan en el DOM después de que se crea la página? ¿Hay una forma clara de manejar cómo se forman los formularios? Debe haber una forma clara de invocar los formularios para representar "el path jQuery Mobile" sin que solo dependa de las tags de attributes de datos en el HTML base.

Cualquier ayuda o visión sobre este problema sería muy apreciada … Estoy en la búsqueda de que Backbone JS y jQuery Mobile funcionen bien juntos.

Muchas gracias, James

actualizar

Desde jQueryMobile beta2 hay un evento para hacer esto. .trigger('create') en un elemento para hacer que todo lo que está dentro se .trigger('create') correctamente.

Otra pregunta que no es un duplicado, pero requiere una respuesta que publiqué más de 10 veces 🙂

[respuesta anterior]

testing .page()

Más detalles en mi faq: http://jquerymobiledictionary.pl/faq.html

Actualizar toda la página funcionó para mí:

 $('#pageId').page('destroy').page(); 

No estoy seguro de si esto ayuda, pero cuando agregué elementos dynamics, estaba usando .page () en la llamada de éxito ajax (ejemplo aquí y aquí ) pero descubrí que no estaba funcionando como esperaba. Descubrí que en la llamada ajax es mejor actualizar el elemento (si es un elemento de formulario) para usar estos methods documentados :

  • Casillas de verificación:

     $("input[type='checkbox']").attr("checked",true).checkboxradio("refresh"); 
  • Radios:

     $("input[type='radio']").attr("checked",true).checkboxradio("refresh"); 
  • Selecciona:

     var myselect = $("select#foo"); myselect[0].selectedIndex = 3; myselect.selectmenu("refresh"); 
  • Controles deslizantes:

     $("input[type=range]").val(60).slider("refresh"); 
  • Interruptores Flip (usan control deslizante):

     var myswitch = $("select#bar"); myswitch[0].selectedIndex = 1; myswitch .slider("refresh"); 

y para agregar un elemento que no sea de formulario use .page ()

JQuery Mobile ahora es compatible con .trigger ("crear"); que resolverá esto por ti

Necesitaba una forma de actualizar dinámicamente una página JQM después de que se había inicializado. Descubrí que si eliminaba la "página" del atributo de datos durante el evento "pagehide", la próxima vez que se mostraba la página de JQM se volvía a inicializar.

 $('#testing').live('pagehide', function (e) { $.removeData(e.target, 'page'); }); 
 $('#pageId').page('destroy').page(); 

funciona para grupos de control completos que se generan, y mucho less para los niños con input de radio.

-Micro

Intenta llamar a .trigger ("crear") en el elemento con el nuevo contenido.

Me funcionó cuando llamé a .trigger ('crear') en el elemento div adjunto. Vea el siguiente ejemplo:

En file .html:

 <div id="status-list" data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose as many snacks as you'd like:</legend> <input type="checkbox" name="checkbox-1a" id="checkbox-1a"/> <label for="checkbox-1a">Cheetos</label> </fieldset> </div> 

en el file .js:

 $("#status-list").trigger('create'); 

Para mí, solo .page() funcionó (sin .page('destroy') ).

P.ej:

 $('my-control-group-id').page(); 

Amnon

Estoy un poco fuera del tema. Quería poder evitar que jqm cree el primer div de página pnetworkingeterminado en init, ya que la networking troncal de todos modos divide los elementos en divs. Quería insert páginas dinámicamente en el DOM y luego llamar a jqm para crear sus classs y widgets. Finalmente hice esto así:

  <head> <script src="jquery-1.8.3.js"></script> <script type='javascript'> $(document).on("mobileinit", function () { $.mobile.autoInitializePage = false; } </script> <script src="jquery.mobile-1.3.0-beta.1.min.js"></script> </head> <body> ....... dynamically add your content .......... <script type='javascript'> $.mobile.initializePage() </script> </body> 

y mi configuration de jqm de agujero (que pones antes de jqm.js)

 $(document).on("mobileinit", function () { $.mobile.ajaxEnabled = false; $.mobile.hashListeningEnabled = false; $.mobile.pushStateEnabled = false; $.mobile.linkBindingEnabled = false; // delegating all the events to chaplin $.mobile.changePage.defaults.changeHash = false; $.mobile.defaultDialogTransition = "none"; $.mobile.defaultPageTransition = "slidedown"; $.mobile.page.prototype.options.degradeInputs.date = true; $.mobile.page.prototype.options.domCache = false; $.mobile.autoInitializePage = false; $.mobile.ignoreContentEnabled=true; }); 

Hasta ahora, Backbone y JQM han estado funcionando bien.

Intenta usar el método enhanceWithin () . Este debería ser el método de cualquier object jQuery al usar jQuery Mobile.