Share
Dans ce didacticiel, nous verrons comment le système de modèles bêta de jQuery peut être utilisé de manière excellente afin de découpler complètement notre code HTML de nos scripts. Nous allons également jeter un coup d'œil sur le module AJAX entièrement repensé de jQuery 1.5.
Templating est une nouveauté (elle est toujours en version bêta, elle devrait donc légèrement changer à mesure qu'elle évolue et migre vers le noyau, mais elle existe depuis une bonne année), une fonctionnalité extrêmement puissante de jQuery qui nous permet de spécifier un modèle à utiliser. lors de la construction de structures DOM via un script, ce que je suis sûr de faire tous les jours ou presque.
Utiliser jQuery a toujours été incroyablement simple:
Accentsconagua
$ ("# someElement"). children (). each (function () $ (this) .wrap ($ (""));); La modélisation nous permet de supprimer ces extraits de code HTML basés sur des chaînes de notre comportement..
Cela va simplement envelopper chaque élément enfant de La modélisation nous permet de supprimer ces fragments de code HTML basés sur des chaînes de notre couche de comportement et de les replacer fermement là où ils appartiennent dans la couche de contenu. En même temps, nous pouvons également découvrir l’une des toutes nouvelles fonctionnalités AJAX super cool de jQuery 1.5 - les objets différés.. Dans cet exemple, nous construirons un widget Twitter qui chargera non seulement certains de nos tweets récents, mais répertoriera également des amis, des abonnés et des suggestions. J'ai choisi Twitter pour cet exemple car il génère du JSON dans le format requis; c'est facile et amusant. Alors, commençons; le widget lui-même sera construit à partir de la balise sous-jacente suivante: Nous utilisons HTML5 et avons inclus le simplifié Ce widget irait probablement dans une barre latérale et serait distinct du contenu réel de la page sur laquelle il est présenté, mais en relation avec le site dans son ensemble. Dans cet esprit, je me sens un Poursuivant notre balisage, nous avons quelques détails sur l'utilisateur Twitter dont les tweets sont répertoriés, y compris le nom dans un Ensuite, nous avons les onglets qui seront utilisés pour basculer entre les tweets, les amis et les suiveurs. Ceux-ci sont construits à partir d'une simple collection de Notez que nous utilisons également un plugin - c’est le Enfin, nous avons les éléments qui contiendront chaque flux de données; nous avons un conteneur externe avec un Prenez une copie maintenant et collez-la dans le même dossier que la page Web que nous venons de créer. J'ai déjà mentionné une feuille de style personnalisée. ajoutons cela maintenant; Dans un nouveau fichier de votre éditeur de texte, ajoutez le code suivant: Enregistrer ce fichier sous Rassemblons le script de base et faisons fonctionner ces onglets. Dans un autre nouveau fichier de votre éditeur de texte, ajoutez le code suivant: Enregistrer ce fichier sous Nous devrons sélectionner des éléments à plusieurs reprises dans le code; La mise en cache d'une référence au conteneur externe permet donc de réduire le nombre d'objets jQuery à créer. Nous avons ensuite défini un gestionnaire de clic pour les liens de tabulation qui obtient le Maintenant, le vrai plaisir commence; nous pouvons faire des demandes à Twitter pour obtenir nos trois ensembles de données et utiliser le plugin de modèles de jQuery pour créer les éléments DOM requis à l'aide des données obtenues à partir des demandes. Nous allons d'abord récupérer les données, puis ajouter les modèles. Après le gestionnaire de clic pour les liens d'outil, ajoutez le code suivant: Tout d'abord, nous utilisons jQuery Nous définissons ensuite trois fonctions standard; au sein de chaque fonction, nous utilisons jQuery Pour nous assurer que les données sont stockées au format correct pour JSON, nous utilisons la notation entre crochets.. Nous n'avons pas besoin de beaucoup de données, donc dans chaque le Les fonctions permettant de récupérer les listes d’amis et d’abonnés sont pratiquement identiques. Encore une fois, nous renommons les propriétés avec lesquelles nous allons travailler lorsque nous construisons nos objets et que nous les stockons dans chaque tableau. Nos trois gestionnaires de succès stockent les tableaux à 5 éléments résultants dans la Notez que nous n'invoquons pas chacun de nos le Une fois que toutes les fonctions sont retournées, l’objet différé est résolu et toutes les fonctions enregistrées avec C'est incroyable; nous souhaitons faire les trois demandes, mais nous n'avons aucun moyen de savoir à l'avance laquelle de celles-ci seront renvoyées en dernier. Il est donc impossible d'utiliser la fonction de rappel d'une demande si nous souhaitons traiter les données renvoyées par toutes les fonctions au même endroit. en même temps. Dans le passé, nous aurions probablement dû configurer un intervalle qui interrogeait chaque fonction de manière répétée pour vérifier si elle était revenue et attendait que toutes les fonctions soient écoulées avant de poursuivre. Maintenant, nous pouvons déléguer tout ce suivi manuel à jQuery pour nous le gérer automatiquement. Nous utilisons deux fonctions utilitaires dans cet exemple: le Ensuite, nous créons des variables. nous définissons un tableau contenant les noms de jours abrégés, avec dimanche (ou dimanche) comme premier élément du tableau. Les jours dans les dates JavaScript sont basés sur zéro, dimanche étant toujours le jour 0. Nous créons ensuite un Rendez-vous amoureux objet en utilisant le Nous créons ensuite un autre tableau contenant trois éléments: le premier élément obtient le jour correct de la semaine à partir du premier tableau créé dans cette fonction, l'élément suivant obtient la date localisée et le dernier élément obtient l'heure localisée. Enfin, nous renvoyons le contenu du tableau après l'avoir rejoint. Nous pourrions simplement utiliser la concaténation de chaînes pour construire cette chaîne de date, mais la jonction d'éléments de tableau est beaucoup plus rapide que la construction manuelle de chaînes.. le Nous testons ensuite le texte pour voir s'il contient des noms d'utilisateur; Si c'est le cas, nous scindons ensuite la chaîne de texte à chaque occurrence d'un nom d'utilisateur. Cela nous donnera un tableau contenant des éléments qui sont soit du texte brut, soit un nom d'utilisateur. Nous parcourons ensuite chaque élément de ce tableau et vérifions si chaque élément contient le C'est tout; une fois que nous avons stocké nos objets, la fonction renvoie le nouveau Maintenant que nous avons nos données JSON traitées, nous pouvons passer à la dernière partie de l'exemple: les modèles. Dans la fonction anonyme passée à la Ce code applique simplement les modèles en utilisant la méthode du plugin jQuery templating Revenez au HTML et ajoutez d'abord ce qui suit Les modèles jQuery sont ajoutés à la page HTML à l'aide de Ce modèle est beaucoup plus simple, car nous n’utilisons ni modèles imbriqués ni itérations, nous insérons simplement les données de chaque tableau JSON en utilisant le Maintenant que nous avons appliqué les modèles et rempli notre widget, nous pouvons ajouter quelques styles CSS supplémentaires pour ranger les nouveaux éléments qui ont été ajoutés. dans tweetbox.css, ajoutez le code suivant à la fin du fichier: Enregistrez le fichier, notre page devrait maintenant apparaître comme suit: Il y a encore une chose que nous devrions probablement faire: pour le moment, notre fonction de formatage de tweet ne fonctionne pas dans IE à cause de la façon dont IE traite les Cela devrait être ajouté directement avant la référence du script à notre Dans ce didacticiel, nous avons examiné certaines des fonctionnalités les plus avancées de la modélisation jQuery, telles que l’itération d’élément avec Un point clé est que le nouveau système de gabarit de jQuery nous permet de mieux séparer nos couches de comportement et de présentation, en déplaçant tous les extraits HTML du Certains pourraient dire que nous avons maintenant la situation opposée et simplement plus Cependant, je pense que cela est infiniment préférable à l’alternative. Éléments au format Nous avons également examiné l'excellent nouveau Merci beaucoup pour votre lecture et laissez-moi savoir si vous avez des questions!#someElement dans un nouveau
Commencer
DOCTYPE et meta charset élément. Nous établissons un lien vers une feuille de style personnalisée, que nous allons créer dans un instant, et afin de prendre en charge les versions actuelles d'IE8 et versions antérieures, nous utilisons un commentaire conditionnel pour créer un lien vers la version hébergée par Google. html5shiv fichier. En utilisant
de côté est un conteneur externe approprié dans ce cas. Nous lui donnons un identifiant pour faciliter la sélection et le style., une image et la bio dans une norme . N'hésitez pas à les modifier selon vos propres détails lors de la reconstruction de l'exemple. Nous pourrions obtenir tous ces éléments à partir de l'appel JSON que nous ferons lorsque nous demanderons les données. Toutefois, s'il y a un léger retard dans la demande lors du chargement de la page, le visiteur peut être laissé en train de regarder un tas de boîtes vides, si coder en dur cette information dans le widget est à nouveau approprié. Si nous faisions un plugin pour que d'autres développeurs l'utilisent, nous ne pourrions certainement pas le faire, mais lorsque nous ajoutons cela à notre propre site ou au site d'un client spécifique, cette approche est réalisable.. et éléments. L'onglet amis sera affiché par défaut, donc le lien pour cet onglet a la classe sur attaché à elle. Dans un projet plus vaste, nous pourrions bien sûr utiliser les onglets de l'interface utilisateur de jQuery, mais je ne voulais pas que le didacticiel perde le focus, et ce n'est pas la peine d'ajouter cette fonctionnalité manuellement.tmpl (modèle) plugin, ce qui nous donne la possibilité d'utiliser des modèles jQuery. identifiant de alimentation, et trois conteneurs pour les tweets, amis et adeptes respectivement, qui ont également identifiant attributs pour faciliter la sélection. Nous incluons aussi un élément pour les visiteurs pour lesquels le script peut être désactivé (le cas échéant, il en existe déjà), qui se trouve dans la zone de contenu par défaut de l'onglet. Notez que nous utilisons également un plugin - c’est le tmpl (modèle) plugin, ce qui nous donne la possibilité d'utiliser des modèles jQuery. Ce fichier peut être téléchargé ici#tweetbox display: block; largeur: 300px; rembourrage: 10px; bordure: 1px solide #aaa; -moz-border-radius: 5px; border-radius: 5px; famille de polices: "Trebuchet MS", Arial, Helvetica, sans-serif; couleur de fond: #eee; #tweetbox img display: block; #user margin-bottom: 10px; float: gauche; #user h2 marge: 0 0 10px 0; position: relative; taille de police: 18px; #user img float: left; #user p width: 230px; marge: 0; position: relative; float: gauche; taille de police: 10px; couleur: # 333; #user img display: block; marge droite: 10px; bordure: solide 3px # 333; #tools margin: 0; * marge-bas: -10px; rembourrage: 0; clarifier les deux; type de style de liste: aucun; #tools li float: left; #tools a display: block; hauteur: 20px; rembourrage: 3px 24px; bordure: 1px solide #aaa; bordure inférieure: aucune; -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; margin-right: -1px; position: relative; taille de police: 14px; contour: aucun; couleur de fond: # d6d6d6; background-image: -webkit-gradient (linéaire, haut gauche, bas gauche, arrêt de couleur (0.5, # E8E8E8), arrêt de couleur (0, #DBDBDB), arrêt de couleur (0.5, # D6D6D6)); image d'arrière-plan: -moz-linear-gradient (centre en haut, # E8E8E8 50%, #DBDBDB 0%, # D6D6D6 50%); a text-decoration: none; couleur: # 333; #tools .on height: 21px; marge supérieure: -1px; en haut: 1px; #feed width: 298px; bordure: 1px solide #aaa; clarifier les deux; couleur de fond: # d6d6d6; #feed> div display: none; noscript display: block; rembourrage: 10px; taille de police: 13px; couleur: # 333;
tweetbox.css dans le même répertoire que la page HTML. Ceci est juste un peu de style de mise en page pour notre widget. Il existe deux subtilités CSS3 pour les navigateurs compétents: certaines actions aux angles arrondis (notez que nous n’avons plus besoin de la -webkit- préfixe du fournisseur pour les coins arrondis dans les navigateurs Webkit les plus récents!) et des dégradés pour les onglets. Un point à noter est que nous cachons tous les conteneurs dans l'élément de fil, sauf celui avec la classe. actif. À ce stade (et avec JS désactivé), le widget devrait ressembler à ceci:
Ajout du script
(function ($) // onglets var tweetbox = $ ("# tweetbox"), tweetData = null, friendData = null, followData = null; tweetbox.find ("# outils a"). click (function (e) e.preventDefault (); var lien = $ (ceci), cible = lien.attr ("href"). split ("#") [1]; tweetbox.find (". sur"). removeClass ("on" ); link.addClass ("on"); tweetbox.find ("# feed> div"). hide (); tweetbox.find ("#" + target) .show ();) (jQuery) ; tweetbox.js dans le même répertoire que la page HTML. Tout est assez simple et, comme ce n’est pas vraiment l’objet principal de ce tutoriel, je n’entrerai pas trop dans les détails. Nous ne faisons qu'aliaser le caractère de chaîne dans une fonction anonyme, que nous exécutons immédiatement (davantage pour les bonnes pratiques que pour la simple nécessité dans cet exemple), puis pour mettre en cache un sélecteur du conteneur externe principal du widget. Nous initialisons également trois variables pour une utilisation ultérieure et définissons leurs valeurs sur nul.identifiant de l'onglet à afficher depuis le href du lien sur lequel vous avez cliqué, supprime le nom de la classe sur à partir des liens de l'onglet, puis l'ajoute au lien sur lequel l'utilisateur a cliqué. Nous masquons ensuite tous les panneaux à onglets avant d'afficher le panneau sélectionné..
Obtenir les données
$ .ajaxSetup (dataType: "jsonp"); function getTweets () $ .ajax ("http://api.twitter.com/statuses/user_timeline/danwellman.json", success: function (données) var arr = []; pour (var x = 0; X < 5; x++) var dataItem = ; dataItem["tweetlink"] = data[x].id_str; dataItem["timestamp"] = convertDate(data, x); dataItem["text"] = breakTweet(data, x); arr.push(dataItem); tweetData = arr; ); function getFriends() return $.ajax("http://api.twitter.com/1/statuses/friends/danwellman.json", dataType: "jsonp", success: function(data) var arr = []; for (var x = 0; x < 5; x++) var dataItem = ; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); friendData = arr; ); function getFollows() return $.ajax("http://api.twitter.com/1/statuses/followers/danwellman.json", dataType: "jsonp", success: function(data) var arr = []; for (var x = 0; x < 5; x++) var dataItem = ; dataItem["screenname"] = data[x].screen_name; dataItem["img"] = data[x].profile_image_url; dataItem["name"] = data[x].name; dataItem["desc"] = data[x].description; arr.push(dataItem); followData = arr; ); //execute once all requests complete $.when(getTweets(), getFriends(), getFollows()).then(function() //apply templates ); ajaxSetup () méthode pour définir le Type de données option de jsonp pour toutes les demandes ultérieures. Comme ce sera le Type de données utilisé par chacune de nos demandes, il est logique de définir l'option une seule fois.ajax () méthode pour faire une demande au service Web qui renvoie chaque ensemble de données avec lesquelles nous allons travailler, le user_timeline, copains et suiveurs respectivement. Dans les paramètres de chaque demande, nous définissons un Succès gestionnaire qui sera exécuté une fois que chaque demande individuelle sera retournée avec succès. Chacune de ces requêtes renverra un objet JSON pouvant contenir jusqu'à 100 objets remplis de données Twitter..Succès gestionnaire nous créons un nouveau tableau, qui contiendra à son tour une série d’objets contenant uniquement les données que nous allons réellement utiliser. Pour vous assurer que les données sont stockées au format correct pour JSON, où chaque nom de propriété doit être une chaîne, nous utilisons la notation entre crochets pour définir les noms de propriété au format chaîne..user_timeline demande stocke le chaîne d'identification du tweet qui peut être utilisé dans le cadre d'une URL pointant sur le tweet, ainsi que pour stocker le résultat de deux fonctions utilitaires. La première de ces fonctions crée une chaîne de données formatée qui convertit la date renvoyée par Twitter en quelque chose d'un peu plus joli et qui est localisée sur la machine du spectateur. Nous mettons également en forme le texte du tweet afin de pouvoir identifier @usernames trouvé dans le texte. Nous examinerons sous peu les fonctions de formatage de date et de tweet.nul les variables que nous définissons en haut du script.getTweets (), getFriends () et getFollowers () fonctionne manuellement. Au lieu de cela, nous utilisons la nouvelle version de jQuery quand() méthode pour invoquer tous en même temps. Cette méthode gèrera complètement l'exécution de ces fonctions et gardera trace du moment où chacune d'entre elles est revenue. Nous enchaînons les puis() méthode après la quand() méthode. Une fois que toutes les fonctions spécifiées ont été renvoyées avec succès, la fonction de rappel que nous passons au puis() la méthode sera exécutée.
quand() méthode crée un objet différé qui gère les fonctions que nous spécifions en tant qu'arguments. puis() sont appelés. D'autres manipulateurs peuvent également être enchaînés au quand() objet différé, tel que échouer(), qui serait exécuté si une ou plusieurs des fonctions transmises à l'objet différé échouaient.
Fonctions utilitaires
convertDate () et breakTweet (). Le code pour ces fonctions est le suivant:// format date convertDate = function (obj, i) // supprime le décalage de fuseau horaire dans IE si (window.ActiveXObject) obj [i] .created_at = obj [i] .created_at.replace (/ [+] \ d 4 /, ""); // jolie date dans les paramètres régionaux du système var days = ["Dim", "Lun", "Mardi", "Mercredi", "Jeudi", "Ven", "Sam"], date = nouvelle Date (obj [i] .created_at), formattedTimeStampArray = [jours [obj [i] .created_at], date.toLocaleDateString (), date.toLocaleTimeString ()]; return formattedTimeStampArray.join (""); // formatez le texte breakTweet = function (obj, i) // atify var text = obj [i] .text, brokenTweet = [], atExpr = / (@ [\ w] +) /; if (text.match (atExpr)) var splitTweet = text.split (atExpr); pour (var x = 0, y = splitTweet.length; x < y; x++) var tmpObj = ; if (splitTweet[x].indexOf("@") != -1) tmpObj["Name"] = splitTweet[x]; else tmpObj["Text"] = splitTweet[x]; brokenTweet.push(tmpObj); else var tmpObj = ; tmpObj["Text"] = text; brokenTweet.push(tmpObj); return brokenTweet; convertDate () la fonction est relativement simple: on vérifie d’abord si le navigateur utilisé est une variante de IE en recherchant window.ActiveXObject. Si cela est trouvé, nous utilisons le JavaScript remplacer() méthode pour supprimer le décalage de fuseau horaire fourni avec la chaîne contenue dans le créé à propriété de l'objet JSON renvoyé par Twitter. Cette méthode prend le modèle d'expression régulière à rechercher et une chaîne vide pour le remplacer. Cela empêche IE de s’étouffer + caractère lorsque la chaîne est passée à la nouvelle date constructeur.nouvelle date () constructeur, et transmettez la chaîne de date stockée dans le créé à propriété de l'objet que nous avons transmis à la fonction.breakTweet () la fonction est légèrement plus complexe. Ce que nous devons faire est de convertir le texte brut en tableau JSON où chaque élément de tableau est un objet contenant soit un prénom ou Texte propriété afin que nous puissions utiliser les données avec un modèle (plus sur les modèles à venir). D'abord, nous stockons le texte de l'objet renvoyé par Twitter (que nous passons dans la fonction). Nous créons également un tableau vide dans lequel stocker les objets et définissons l'expression régulière qui correspondra. @usernames.@ symbole; si c'est le cas, nous savons qu'il s'agit d'un nom d'utilisateur et stockons-le dans un objet avec la clé prénom. S'il ne contient pas le @ symbole on enregistre avec la clé Texte. L'objet est ensuite poussé dans le tableau. En outre, si le texte entier ne contient pas de @ personnage nous le stockons avec la clé Texte.cassé tableau à la user_timeline fonction de réussite et est stockée dans l’objet JSON principal à utiliser avec nos modèles. En plus de clarifier le texte, nous pourrions également créer des liens et hachifier si nous le voulions. Je vous laisse le soin de le mettre en œuvre.
Templating
puis() méthode dans la dernière section de code, il y avait un commentaire et rien d'autre. Juste après ce commentaire, ajoutez le code suivant:// applique les modèles tweetbox.find ("# tweetTemplate"). tmpl (tweetData) .appendTo ("# tweetList"); tweetbox.find ("# ffTemplate"). tmpl (friendData) .appendTo ("# friendList"); tweetbox.find ("# ffTemplate"). tmpl (followData) .appendTo ("# followList"); // affiche les tweets tweetbox.find ("# tweets"). show (); tmpl (). La méthode accepte le JSON contenant les données que le modèle utilisera. Nous spécifions ensuite où dans le document insérer les éléments de modèle. Chaque ensemble de modèles ajoute les éléments au conteneur vide respectif du widget. le tmpl () La méthode est appelée sur trois éléments, mais ces éléments n'existent pas encore. Nous ajouterons ces prochaines.
Ajout des modèles jQuery
$ data format d'élément de modèle.
Finir
#feed ul padding: 0; marge: 0; #feed li padding: 0; border-bottom: 1px solide #aaa; type de style de liste: aucun; taille de police: 11px; #feed li: dernier-enfant, #feed li: dernier-enfant p border-bottom: none; #feed p padding: 10px; marge: 0; border-bottom: 1px solid #eee; background-image: -webkit-gradient (linéaire, gauche-inférieur, gauche-supérieur, stop de couleur (0.48, # c2c2c2), stop de couleur (0.71, # d6d6d6)); image d'arrière-plan: -moz-linear-gradient (centre en bas, # c2c2c2 48%, # d6d6d6 71%); #feed p: after content: ""; bloc de visualisation; largeur: 100%; hauteur: 0; clarifier les deux; .tweet-link display: block; marge supérieure: 5px; couleur: # 777; .img-link display: block; marge: 4px 10px 0 0; float: gauche; #feed .username a font-size: 14px; poids de police: gras; #feed .bio display: block; marge supérieure: 10 px;
Divisé() méthode d'expression régulière. Pour résoudre ce problème, nous pouvons utiliser un excellent correctif JavaScript créé par Steven Levithan. Il peut être téléchargé à partir de: http://blog.stevenlevithan.com/archives/cross-browser-split et peut être inclus dans la page en utilisant un commentaire conditionnel de la même manière que nous avons ajouté le html5shiv fichier:tweetbox.js fichier.
Résumé
chaque et conditionnels avec si et autre.
.js fichier et retour dans le .html fichier. >$ ("quand() méthode fournie dans jQuery 1.5, qui nous permet de gérer un ensemble de requêtes asynchrones et d’exécuter du code une fois qu’elles sont toutes terminées. Cela implique l’utilisation du puis() méthode pour spécifier une fonction à exécuter une fois que les fonctions asynchrones sont toutes retournées.
