Framework7 – Tutorial Español – Parte 5
Perdón, Perdón… Se que este tutorial lo dejé un poco, por falta de tiempo :). Vamos a intentar retomarlo, seguimos con este gran framework, en la segunda parte de este tutorial vimos como se agregaba una página hija, como abrirla y como detectar que se había abierto para realizar una acción.
Si has llegado aquí directamente y no has visto los anteriores te los dejo aquí
Algo que se me pasó por alto fué las opciones que Framework7 da para en este caso enviar variables para que en la función que detecta cuando la página hija está lista realizar una acción determinada teniendo en cuenta las variables que recibimos.
Un ejemplo práctico, una aplicación que muestra productos, esta aplicación tendrá un listado que podría ser el principal cuando se abre la aplicación y una página hija que será producto.html para abrir una página tenemos dos opciones, por enlace href o por las funciones de Framework7
Framework7 ya provee de un pequeño jQuery interno por lo que no es necesario agregarlo, claro está, no están todas las opciones de jQuery, depende de como se necesite podemos agregarlo o no.
Lo llamaremos jQuery pero siempre que se utilice $$, como jQuery ($) es el propio de Framework7 el valor de $$ lo vimos en la primer parte
var $$ = Dom7;
Con esta nueva variable podemos utilizar por ejemplo obtener el valor de un input de un formulario como si de jQuery se tratara.
var valorDeMiInput = $$(".miInput").val();
Esto nos guardaría en la variable valorDeMiInput como bien dice el su nombre el valor que se haya agregado a ese input.
Pues bien ahora que ya sabes como usarlo vamos a ver como pasar valores de una página a otra a través de sus parametros GET.
Si por ejemplo a nuestra aplicación con Framework7 le agregamos un boton que tenga lo siguiente
<a href="producto.html?id=12&titulo=Zapatillas" class="button button-fill">Mira mis zapatillas</a>
Este botón nos llevaría a la página de un producto donde le estamos pasando el id y el titulo.
id = 12
titulo = Zapatillas
Tip: Ese dato ya lo tenemos y podemos pasar más valores para montar la previa del producto, y no tener que rescatar todos los datos de nuevo de este producto, por ejemplo precio y demás si se los enviamos a través de la url los podremos utilizar al instante y no tener que esperar que el servidor responda.
Ahora ¿Como recibimos estos parámetros en la función?
La función es la siguiente
$$(document).on("page:init page:reinit",".page-producto", function(d){
var id = d.detail.page.query.id;
var titulo = d.detail.page.query.titulo;
});
Bien! has usado $$ ! La función de .on() también está disponible en Framework7, aquí te dejo un listado completo de las funciones que soporta
Dejando a un lado las funciones es bastante simple y fácil de entender, cuando page se ha iniciado o «reiniciado» (Esto lo veremos más tarde) lanzaría la función callback y como veis ya tenemos en las dos variables de id y titulo los valores recibidos, están accesibles desde el parámetro del callback es un objeto que trae muchísimos otros valores que podréis ver si dentro de esa función usais la consola.
$$(document).on("page:init page:reinit",".page-producto", function(d){
console.log(d);
var id = d.detail.page.query.id;
var titulo = d.detail.page.query.titulo;
});
Ahora mostraría por consola todo lo que recibe, datos que podemos usar en nuestra aplicación.
Pero lo que nos interesa está en detail -> page -> query -> NOMBRE_DEL_PARAMETRO en este caso los nombres del parámetro han sido id y titulo, deberíamos ir agregando según los necesitemos.
page:reinit
Este evento se dispara cuando una página se vuelve a mostrar de nuevo o se recarga, interesante por ejemplo para estamos en una sección que la hemos actualizado, si desde esa sección o página pulsamos en editar y una vez terminemos la guardamos y recargamos esa página. Esta opción solo funciona con páginas cacheadas en el DOM, puedes leer más aquí.
Nos vemos pronto, lo prometo 🙂
Happy Code!
Si tenéis dudas sobre como se utiliza algunas de las opciones de Framework7 y queréis un tutorial sobre eso, solo pedirlo en los comentarios 🙂
