• jQuery Mobile et génération de Page dynamique

jQuery Mobile et génération de Page dynamique

jQuery Mobile permet aux pages d'être placées dans le DOM dynamiquement par le biais du comportement détourné du click par défaut, ou via des appels manuels à $.mobile.changePage(). C'est idéal pour les applications qui génèrent des pages/fragments HTML côté-serveur, mais il y a parfois des cas où une application doit générer dynamiquement le contenu de la page côté client depuis JSON ou un quelconque autre format. Ceci peut être nécessaire pour des raisons de performances/bande passante, ou parce que c'est le format de données choisi pour le serveur avec lequel ils interagissent.

Pour les applications qui ont besoin de générer le balisage d'une page côté client, il est important de connaître les notifications qui sont déclenchées lors d'un appel à $.mobile.changePage() parce qu'ils peuvent être utilisés comme crochets dans le système de navigation qui vous permettra de générer votre contenu au moment opportun.

Un appel à changePage() déclenchera généralement les notifications d'événement suivants :

• pagebeforechange
  • Déchargé avant tout chargement ou transition de page.
  • NOTE : Cet événement était anciennement connu sous le nom "beforechangepage".
• pagechange
  • Déchargé après tout chargement ou transition de page.
  • NOTE : cet événement était anciennement connu sous le nom "changepage".
• pagechangefailed
  • Déchargé si une erreur s'est produite en essayant de charger dynamiquement une nouvelle page.

Ces notifications sont déclenchées sur l'élément conteneur parent ($.mobile.pageContainer) des pages et bouillonnera jusqu'à atteindre l'élément document et window.

Pour les applications qui souhaitent injecter des pages ou modifier radicalement le contenu d'une page existante, basée sur des données non-HTML, tels que JSON ou un objet JS en mémoire, l'événement pagebeforechange est très utile, car il vous donne un crochet pour analyser l'URL ou l'élément page, l'application est invitée à charger ou à switcher, et court-circuite le comportement par défaut de changePage() en appelant simplement preventDefault() sur l'événement pagebeforechange.

Pour illustrer cette technique, jetez un coup d'oeil sur cet échantillon de travail. Dans cet exemple, la page principale commence avec une liste de catégories dans laquelle l'utilisateur peut naviguer. Les éléments réels dans chaque catégorie sont stockés dans un objet JavaScript en mémoire, à des fins d'illustration, mais les données peuvent provenir de n'importe où.

var categoryData = {
	animals: {
		name: "Animals",
		description: "All your favorites from aardvarks to zebras.",
		items: [
			{
				name: "Pets",
			},
			{
				name: "Farm Animals",
			},
			{
				name: "Wild Animals",
			}
		]
	},
	colors: {
		name: "Colors",
		description: "Fresh colors from the magic rainbow.",
		items: [
			{
				name: "Blue",
			},
			{
				name: "Green",
			},
			{
				name: "Orange",
			},
			{
				name: "Purple",
			},
			{
				name: "Red",
			},
			{
				name: "Yellow",
			},
			{
				name: "Violet",
			}
		]
	},
	vehicles: {
		name: "Vehicles",
		description: "Everything from cars to planes.",
		items: [
			{
				name: "Cars",
			},
			{
				name: "Planes",
			},
			{
				name: "Construction",
			}
		]
	}
};

L'application utilise des liens avec des URLs qui contiennent un hachage qui indique à l'application quelle catégorie d'éléments afficher :

<h2>Sélectionnez une catégorie ci-dessous :</h2>
<ul data-role="listview" data-inset="true">
	<li><a href="#category-items?category=animals">Animaux</a></li>
	<li><a href="#category-items?category=colors">Couleurs</a></li>
	<li><a href="#category-items?category=vehicles">Véhicules</a></li>
</ul>

En interne, lorsque l'utilisateur clique sur l'un de ces liens, l'application intercepte l'appel interne de $.mobile.changePage() qui est invoqué par le comportement détourné par défaut du framework. Il analyse ensuite l'URL de la page sur le point d'être chargée et décide alors s'il doit gérer le chargement lui-même, ou laisser le code normal changePage() gérer les choses.

L'application a été en mesure de s'insérer dans le flux de changePage() en se liant à l'événement "pagebeforechange" au niveau du document :

/**
 * Écoute toute tentative d'appel changePage().
 */
$(document).bind( "pagebeforechange", function( e, data ) {
	
	/**
	 * Nous voulons seulement gérer les appels de changePage() où
	 * l'appelant nous demande de charger une page à partir d'une URL.
	 **/
	if ( typeof data.toPage === "string" ) {
	
		/**
		 * On nous demande de charger une page à partir de l'URL,
		 * mais nous ne voulons gérer les URL que les données
		 * correspondant à une catégorie spécifique.
		 */
		var u = $.mobile.path.parseUrl( data.toPage ),
		re = /^#category-item/;
	
		if ( u.hash.search(re) !== -1 ) {
			
			/**
			 * Nous sommes sollicités pour afficher les éléments d'une catégorie spécifique.
			 * Nous Appelons notre méthode interne qui construit le contenu de la catégorie à la volée
			 * basée sur la structure de nos catégories de données en mémoire.
			 */
			showCategory( u, data.options );
			
			/**
			 * Assurez-vous de dire à changePage() que nous avons traité cet appel,
			 * et que par conséquent il n'a rien à faire.
			 */
			e.preventDefault();
		}
	}
});

Alors pourquoi écouter au niveau du document ? Pour résumer, en raison des liens profonds. Nous avons besoin de notre liaison soit active avant que le framework jQuery Mobile initialise et décide de la façon de traiter l'URL initiale qui a invoqué l'application.

Lorsque le callback pour la liaison "pagebeforechange" est invoquée, le second argument du callback sera un objet de données qui contient les arguments qui ont été transmis lors de l'appel initial $.mobile.changePage(). Les propriétés de cet objet sont les suivantes :

• toPage
  • Peut être soit un objet jQuery contenant la page pour faire la transition, *OU* une référence à l'URL d'une page devant être chargée/page de tansition.
• options
  • Objet contenant les options qui ont été transmises par l'appelant de la fonction $.mobile.changePage().
  • On trouvera une liste des options ici.

Pour notre exemple d'application, nous sommes seulement intéressés par l'appels de changePage() où les URLs sont passées au départ, donc la première action que notre callback