¿Forma correcta de usar JQuery-Mobile / Phonegap juntos?

¿Cuál es la forma correcta (hasta la fecha) de usar JQuery Mobile y Phonegap juntos?

Ambos marcos deben cargar antes de que puedan ser utilizados. ¿Cómo puedo estar seguro de que ambos están cargados antes de que pueda usarlos?

Puede usar la función diferida de JQuery.

 var deviceReadyDeferred = $.Deferred(); var jqmReadyDeferred = $.Deferred(); document.addEventListener("deviceReady", deviceReady, false); function deviceReady() { deviceReadyDeferred.resolve(); } $(document).one("mobileinit", function () { jqmReadyDeferred.resolve(); }); $.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded); function doWhenBothFrameworksLoaded() { // TBD } 

Así es como funcionó para mí, basado en el ejemplo anterior

        InforMEA          

Para usar phonegap junto con jquery mobile, debes usarlo así

  Index Page                

Como muchas personas sugirieron usar un diferido es una opción aceptable siempre y cuando no le importe en qué orden se deviceready y los mobileinit . Pero en mi caso, necesité algunos eventos de pageshow cuando la aplicación se cargó por primera vez y mobileinit en esas pageshow / pagebeforeshow / etc. Todos los eventos se deviceready antes de que el deviceready terminara, por lo que no pude deviceready apropiadamente usando un diferido en ellos. Esta condición de carrera no fue algo bueno.

Lo que tenía que hacer era asegurarme de que ‘mobileinit’ no se llevara a cabo hasta después de que ‘ deviceready ‘ ya se deviceready disparado. Debido a que mobileinit dispara inmediatamente cuando carga JQM, elegí usar jQuery.getScript para cargarlo DESPUÉS de que el deviceready ya estuviera terminado.

      

La razón por la que estoy ocultando el cuerpo es que un efecto secundario de este método es medio segundo de visibilidad del documento HTML original antes de que se cargue jquery.mobile. En este caso, es preferible esconderlo un medio segundo adicional de espacio vacío para ver el documento sin estilo.

Creo que no es necesario usar la función diferida. (Tal vez esto no es necesario con las versiones más nuevas de phonegap?) Tengo esto en la cabeza de mi archivo index.html y todo funciona bien. Creo que el orden de incluir jquery, phonegap y jquery mobile es importante.

            MY TITLE  

esto es trabajo para mi base en dhaval, esta muestra cuando aprendo usando sqlite

    Cordova Sqlite+Jquery      
result:

Para construir sobre @ la respuesta de Jeffrey, encontré una manera mucho más limpia que oculta el marcado HTML hasta que JQM ha terminado de procesar la página y representa el primer elemento de página, ya que noté ese parpadeo de 1/2 segundo de marcado desnudo antes de que se renderice JQM.

Solo necesita ocultar todo el marcado con css … PageShow () de JQM le alternará la visibilidad.


 //snip  //snip - now the markup notice the hide class 
//all your regular JQM / html form markup
//snip -- down to the end of /body

Lo siguiente funcionó para mí en PG 2.3 y JQM 1.2, incl. Facebook Connect Plugin:

            

La carga de PhoneGap es ligeramente diferente a la carga de jQuery. jQuery funciona más como una biblioteca de utilidad, por lo que la incluye y está disponible para su uso inmediato. Por otro lado, PhoneGap requiere soporte del código nativo para una inicialización adecuada, por lo que no está listo para ser utilizado luego de ser incluido en la página.

Phonegap sugiere registrarse y esperar que el deviceready evento ejecute cualquier código específico nativo.

    PhoneGap Example       

Phonegap Example

Para obtener más información, consulte el documento