Petit conseil Introduction à la modélisation jQuery

La création de templates JavaScript est une idée intéressante: elle vous permet de convertir facilement JSON en HTML sans avoir à l'analyser. Lors de la conférence Microsoft MIX10, ils ont annoncé qu'ils commençaient à contribuer à l'équipe jQuery. Un de leurs efforts est de fournir un plugin de templates. Dans cette astuce, je vais vous montrer comment l'utiliser.!

Abonnez-vous à notre page YouTube pour voir tous les tutoriels vidéo!

Vous aurez besoin des données pour créer un modèle. vous récupérerez probablement le code JSON de votre serveur; bien sûr, les littéraux Object / Array fonctionnent aussi bien, c'est ce que nous utilisons:

 var data = [name: "John", age: 25, name: "Jane", age: 49, name: "Jim", age: 31, name: "Julie", age: 39 , nom: "Joe", âge: 19 ans, nom: "Jack", âge: 48 ans]];

Le modèle est écrit en Mots clés; pour chaque élément de votre JSON, le modèle rendra le code HTML; ensuite, il vous renverra l'intégralité du fragment HTML. Vous pouvez accéder aux valeurs JavaScript à partir du modèle en utilisant % et% comme balises. Nous pouvons également exécuter du code JavaScript régulier dans ces balises. Voici notre modèle:

 
 % = $ i + 1% 
Prénom:  % = name%
 % if ($ context.options.showAge) % 
Âge:  % = age%
 %% 

Pour rendre les données avec le modèle, appelez le plugin; passer les données à la méthode du plugin; vous pouvez également éventuellement passer un objet options. (Ce ne sont pas des options prédéfinies; ce sont des valeurs que vous souhaitez utiliser dans le modèle, peut-être pour créer des branches.)

 $ ("# listTemplate"). render (data, showAge: true). appendTo ("ul");

C'est si facile! Aie du plaisir avec ça! Vous pouvez obtenir le code complet de cette astuce rapide sur Github