¿Por qué tengo que poner todo el script en index.html en jquery mobile?
He usado $.mobile.changepage para realizar la redirección en mis proyectos phonegap+jquerymobile. Sin embargo, lo que me confunde es que necesito colocar el script de todas las páginas en el mismo archivo index.html. De lo contrario, la página de redireccionamiento no puede ejecutar la función en su encabezado.
por ejemplo, mi index.html parece ser
$(document).bind("deviceready",function(){$.mobile.changepage("test.html");})
entonces, mi dispositivo redirigirá a test.html que parece ser
$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>
Sin embargo, el script nunca se ejecutará en test.html. Luego puse el script en index.html, lo que espero que esté hecho. Sea como sea, si pongo todo el guión en la misma página, el proyecto será cada vez más difícil de preservar. Apreciado por su ayuda.
Introducción
Este artículo también se puede encontrar AQUÍ . como parte de mi blog.
Cómo jQuery Mobile maneja los cambios de página
Para comprender esta situación es necesario comprender cómo funciona jQuery Mobile. Utiliza ajax para cargar otras páginas.
La primera página se carga normalmente. Su HEADy BODYestá cargado en el archivo DOMy están allí a la espera de otro contenido. Cuando se carga la segunda página, solo BODYse carga su contenido en el archivo DOM. Para ser más precisos, ni siquiera BODYestá completamente cargado. Sólo se cargará el primer div con un atributo data-role="page", todo lo demás se descartará. Incluso si tiene más páginas dentro, BODYsolo se cargará la primera. Esta regla solo se aplica a las páginas posteriores, si tiene más páginas en un HTML inicial. inicial , se cargarán todas.
Es por eso que su botón se muestra correctamente pero el evento de clic no funciona. El mismo evento de clic cuyo padre HEADno se tuvo en cuenta durante la transición de página.
Aquí hay una documentación oficial: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
Lamentablemente, no encontrará esto descrito en su documentación. O piensan que esto es de conocimiento común o se olvidaron de describirlo como mis otros temas. (La documentación de jQuery Mobile es extensa pero le faltan muchas cosas).
Solución 1
En su segunda página, y en todas las demás páginas, mueva su SCRIPTetiqueta al BODYcontenido, así:
<body>
<div data-role="page">
// And rest of your HTML content
<script>
// Your javascript will go here
</script>
</div>
</body>
Esta es una solución rápida pero aún fea.
Se puede encontrar un ejemplo de trabajo en mi otra respuesta aquí: Pageshow no se activa después de cambiar la página
Otro ejemplo práctico: página cargada de forma diferente con la transición jQuery-mobile
Solución 2
Mueva todo su javascript al primer HTML original. Recopile todo y colóquelo dentro de un único archivo js, en un formato HEAD. Inicialícelo después de que se haya cargado jQuery Mobile.
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Put your code into a new file
</head>
Al final describiré por qué esto es parte de una buena solución.
Solución 3
Utilice rel="external" en sus botones y en todos los elementos que esté utilizando para cambiar de página. Debido a esto, ajax no se utilizará para cargar páginas y su aplicación jQuery Mobile se comportará como una aplicación web normal. Lamentablemente, esta no es una buena solución en su caso. Phonegap nunca debería funcionar como una aplicación web normal.
<a href="#second" class="ui-btn-right" rel="external">Next</a>
Documentación oficial, busque un capítulo: Vincular sin Ajax
Solución realista
La solución realista utilizaría la Solución 2 . Pero a diferencia de la solución 2, usaría ese mismo archivo index.js y lo inicializaría dentro de unHEAD de cada otra página posible.
Ahora puedes preguntarme ¿ POR QUÉ ?
Phonegapal igual que jQuery Mobile tiene errores, y tarde o temprano habrá un error y su aplicación fallará (incluido el DOM cargado) si cada contenido js está dentro de un solo archivo HTML. DOM podría borrarse yPhonegap actualizará su página actual. Si esa página no tiene javascript, no funcionará hasta que se reinicie.
Ultimas palabras
Este problema se puede solucionar fácilmente con una buena arquitectura de página. Si alguien está interesado, he escrito un ARTÍCULO sobre la buena arquitectura de páginas de jQuery Mobile. En pocas palabras, estoy discutiendo que el conocimiento de cómo funciona jQuery Mobile es lo más importante que necesita saber antes de poder crear con éxito su primera aplicación.
A diferencia de las páginas HTML normales, jQuery Mobile utiliza tecnología ajax al navegar entre páginas. Así que asegúrese de importar todos sus archivos y bibliotecas JS en todas sus páginas html.
Si observa con atención, verá que los archivos JS de la página anterior se tienen en cuenta al cargar la segunda página. Pero si fuerza la actualización de la página actual, los archivos js de la página actual serán efectivos.
Como dije antes, asegúrese de importar los archivos js en todos los archivos html.
Tampoco es necesario llamar deviceready, use la siguiente sintaxis para llamar a las funciones js específicas de su página
$(document).on('pageshow', '#YourPageID', function(){
// Your code goes here
});
Jquery Mobile usa ajax para cargar una "página". Una "página" aquí es un div con rol de datos = página. Si carga una página física index.html, puede navegar usando changePage a cualquier div de "página" dentro de esa página.
Sin embargo, si desea cargar una "página" desde otra página física, jQM solo cargará la primera "página" div de esa página. Lo que realmente sucede es que no cambia la página, jQM simplemente carga ese div de "página" en particular usando ajax y lo inyecta en su página actual.
Tiene dos arquitecturas posibles en las que coloca todas sus "páginas" en una página html y navega desde allí. O puede tener una arquitectura de varias páginas. Siempre puedes mezclar esto.
Para cambiar físicamente la página, debe agregar rel=external a su enlace.
