Astuce Travailler avec le plugin officiel jQuery Templating

Cette semaine, l’équipe jQuery a annoncé que le plug-in de création de modèles de Microsoft (avec quelques autres) était désormais officiellement pris en charge. Cela signifie que le plugin sera maintenant maintenu et mis à jour directement par l'équipe principale. Dans ce didacticiel vidéo, nous allons passer en revue l'essentiel du plugin et pourquoi il est si génial..

Comme exemple rapide, nous allons à nouveau nous référer à l’exemple de l’API de recherche Twitter de vendredi (pensez à Bieber). La seule différence est que, cette fois, nous allons utiliser un modèle HTML pour attacher les données renvoyées, plutôt que de brouiller notre code JavaScript.!

Il y a quelques mois, Andrew Burgess vous a présenté ce plugin, toujours en version bêta. Cependant, aujourd’hui, nous intégrerons le plug-in au code en temps réel..

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

Cours accéléré

Étape 1: Importez jQuery et le plugin Templating

Étape 2: Créez votre modèle

Notez comment ce modèle est encapsulé dans scénario balises, et qu'un type de text / x-jquery-tmpl a été appliqué.
Nous référençons les noms de variables de modèle en ajoutant un signe dollar et en enveloppant le nom de la propriété entre accolades..
Si les instructions peuvent être créées en utilisant deux ensembles d'accolades, comme indiqué ci-dessus. (Voir screencast pour plus de détails.)

Étape 3: trouver des données à rendre!

Dans ce cas, nous allons faire une recherche rapide de l'API de recherche Twitter.

Merci à Peter Galiba (voir commentaires), pour avoir recommandé le plus élégant $ .map solution ci-dessus.

Reportez-vous au screencast pour une description complète du code ci-dessus. Mais le plus important, c’est que nous créons un tableau d’objets. Cela servira ensuite de données pour le modèle que nous avons créé à la deuxième étape. Notez comment les noms de propriété:

 nom d'utilisateur: obj.from_user, tweet: obj.text, imgSource: obj.profile_image_url, geo: obj.geo

… Correspondent aux variables de modèle que nous avons créées à la deuxième étape.

Étape 4: Où la majoration doit-elle être rendue??

Ensuite, nous devons désigner où le balisage et les données doivent être rendus. Nous allons créer une liste non ordonnée à cet effet.

Étape 5: restituer les données

Enfin, nous attachons les données au modèle et les ajoutons à la liste non ordonnée (#tweets) créée à la quatrième étape..

 $ ('# tweets'). tmpl (twitter) .appendTo ('# twitter');

Trouvez le scénario (modèle) élément avec un identifiant de tweets.
Joindre le gazouillement tableau à ce modèle.
Ajouter la nouvelle balise au DOM.

Source finale

            Tweets à propos des Nettuts+

Alors qu'est-ce que tu en penses?

Maintenant que le plugin de modélisation est officiellement supporté par l'équipe principale de jQuery, allez-vous l'utiliser dans vos futurs projets?

Code