En un post anterior hice un ejemplo de una lista de JQuery Mobile con el origen de los datos de un JSON. En este post ampliamos sobre ese tema haciendo que al dar clic en cualquier elemento de la lista la aplicación navegue a otra pantalla mostrando más información.

Vamos a darle.

Lo primero es continuar donde nos quedamos, si no tienes el código de post anterior lo puedes descargar o hacer el ejercicio completo.

En el HTML que teníamos al principio teníamos un div con id=“home” y un data-role=“page”. Ahora vamos a crear un nuevo div con id=“show” y también un data-role=“page”.

Agregamos los 3 divs que crean un widget tipo page (data-role=“header” data-role=“content”, data-role=“footer”).

En el div de contenido (data-role=“content”) agregamos unos labels para mostrar la información del artista, mostraremos el nombre, el genero y a que dedada pertenecen.
En la sección del footer agregaremos dos botones. Uno para ir al siguiente artista y otro para ir al anterior.
Nuestro HTML terminado se ve así:
Ahora el JavaScript

Como el contenido de la segunda pagina será dinámico creado a partir del JSON que traíamos tenemos que hacer unos cambios a nuestro código original.

Lo primero que debemos hacer es tener disponible el array de artistas desde cualquier función y como sabemos que las variables globales pueden dar problemas lo primero es hacer un objeto o un namespace para ese arras.

Lo llamaremos datum y tendrá una propiedad data.

Dentro de nuestra llamada para traer el JSON, en la función de respuesta basta que asignemos el valor de los datos de la respuesta a la propiedad data de nuestro objeto.
El siguiente cambio es crear el URL para cada elemento de la lista, dentro del for – in modificamos el LI para incluir un link.
El href del link se crea con esta estructura #+pagina + parámetros de la url.

Así quedaría nuestra llamada por el JSON:

Ahora que ya podemos acceder a los datos desde cualquier función vamos a hablar un poco de como funciona las paginas en JQuery Mobile (JQM).

Todas las paginas en JQM tiene un identificador que sirve para saber a que librería vamos. Si creamos una liga con un hash + id (#identificador) JQM sabe que debe de mostrar esa pagina, también podemos usar una URL tradicional.

Antes de dirigir a la pagina solicitada JQM dispara un evento que le notifica a donde debería de mandarla. Ese evento es el que nos permitida crear el contenido de la pagina antes de mostrarla.

Esto se hace en 3 partes.

Primero capturar el evento “pagecontainerbeforechange”:

Segundo, dentro de la captura del evento:

Verificamos que estamos solicitando una pagina interna y que es la pagina que queremos (podríamos tener diferentes contenidos para diferentes paginas).

Solo queremos modificar el contenido si llamamos la pagina desde un URL (también es posible llamarlo desde objetos).

Y solo queremos generar el contenido de la pagina especifica (#show):

Parseamos el URL y vemos si existe la pagina a la que queremos mandamos a llamar a la función para poblar la pagina y detenemos el evento (e.preventDefault())

Función show Artist

La función recibe dos parámetros, el URL a donde queremos dirigir y un listado de opciones (que heredamos desde el evento anterior).

Extraemos el id del artista que queremos y si existe poblamos los labels con los datos del array.

Agregamos la lógica para los botones y actualizamos las opciones.

Por último mandamos a llamar el vengo para cambiar la página con la pagina de destino y las opciones.

Aqui el código completo.

Listo, con esto ya podemos llamara a una siguiente pagina y procesarla dinamicamente.
El poder tener varias paginas abre todo un espacio de posibilidades, podemos hacer paginas externas que se conecten a algún servicio o podemos tener paginas internas para contenido estático.

El cariño esta en compartir...