Share
In deze tutorial zullen we bekijken hoe het bèta-template-systeem van jQuery uitstekend gebruikt kan worden om onze HTML volledig los te koppelen van onze scripts. We zullen ook snel de geheel vernieuwde AJAX-module van jQuery 1.5 bekijken.
Templating is een newish (het is nog steeds in bèta, dus het zal waarschijnlijk enigszins veranderen naarmate het rijpt en naar de kern migreert, maar het is er het beste deel van een jaar), enorm krachtige jQuery-functie waarmee we een sjabloon kunnen specificeren om te gebruiken bij het bouwen van DOM-structuren via script, iets waarvan ik zeker weet dat we het bijna allemaal dagelijks doen.
Het is altijd ongelooflijk gemakkelijk geweest om jQuery te gebruiken om zoiets als dit te doen:
Accentsconagua
$ ("# someElement"). children (). each (function () $ (this) .wrap ($ (""));); Met Templating kunnen we deze op snaren gebaseerde HTML-fragmenten uit ons gedrag verwijderen.
Hiermee wordt eenvoudig elk onderliggende element van verpakt Templating stelt ons in staat om deze op snaren gebaseerde HTML-fragmenten uit onze gedragslaag te verwijderen en ze terug te plaatsen waar ze behoren in de inhoudlaag. Terwijl we dat doen, kunnen we ook een van de gloednieuwe, super coole AJAX-functies van jQuery 1.5 bekijken - uitgestelde objecten. In dit voorbeeld bouwen we een Twitter-widget die niet alleen enkele van onze recente tweets laadt, maar ook een lijst met vrienden, volgers en suggesties. Ik koos voor Twitter voor dit voorbeeld omdat het JSON uitvoert in het formaat dat we nodig hebben; het is gemakkelijk en leuk. Dus laten we beginnen; de widget zelf zal worden opgebouwd uit de volgende onderliggende mark-up: We gebruiken HTML5 en hebben de vereenvoudigde ingesloten Deze widget zou waarschijnlijk in een zijbalk worden geplaatst en verschilt van de daadwerkelijke inhoud van de pagina waarop deze is weergegeven, maar heeft betrekking op de site als geheel. Met dat in gedachten voel ik een We gaan verder met onze markup en hebben enkele details over de Twitter-gebruiker wiens tweets worden vermeld, inclusief de naam in a Vervolgens hebben we de tabbladen die zullen worden gebruikt om te schakelen tussen de tweets, vrienden en volgers. Deze zijn opgebouwd uit een eenvoudige verzameling van Merk op dat we ook een plug-in gebruiken - dit is de Ten slotte hebben we de elementen die elke gegevensstroom zullen bevatten; we hebben een buitenste container met een Pak nu een kopie en plak deze in dezelfde map als de webpagina die we zojuist hebben gemaakt. Ik noemde eerder een aangepast stijlblad; laten we dat nu toevoegen; voeg in een nieuw bestand in je teksteditor de volgende code toe: Sla dit bestand op als Laten we het basisscript samenvoegen en die tabbladen laten werken. Voeg in een ander nieuw bestand in uw teksteditor de volgende code toe: Sla dit bestand op als We zullen elementen herhaaldelijk in de hele code moeten selecteren; dus het opslaan van een verwijzing naar de buitenste container helpt om het aantal jQuery-objecten dat we moeten maken te minimaliseren. We stellen vervolgens een klik-handler in voor de tab-links die de Nu begint het echte plezier; we kunnen de verzoeken aan Twitter doen om onze drie datasets te krijgen en gebruik te maken van de template-plug-in van jQuery om de vereiste DOM-elementen te maken met behulp van de gegevens die we van de verzoeken ontvangen. We zullen eerst de gegevens ophalen en vervolgens de sjablonen toevoegen. Na de click-handler voor de toollinks voegt u de volgende code toe: Eerst gebruiken we jQuery's We definiëren vervolgens drie standaardfuncties; binnen elke functie gebruiken we jQuery's Om ervoor te zorgen dat de gegevens in de juiste indeling voor JSON worden opgeslagen, gebruiken we de notatie met vierkante haakjes. We hebben niet zoveel gegevens nodig, dus in elk De De functies om de lijst met vrienden en volgers op te halen zijn vrijwel identiek. Nogmaals, we hernoemen de eigenschappen waarmee we zullen werken wanneer we onze objecten bouwen en opslaan in elke array. Alle drie onze succeshandlers slaan de resulterende 5-item-arrays op in de Merk op dat we niet elk van ons aanroepen De Nadat de functies allemaal zijn geretourneerd, wordt het uitgestelde object opgelost en worden alle functies geregistreerd Dit is ongelofelijk; we willen alle drie de verzoeken doen, maar we weten niet op voorhand welke van deze als laatste worden geretourneerd, dus het is onmogelijk om de callback-functie van een verzoek te gebruiken als we de gegevens willen verwerken die worden geretourneerd van alle functies op de dezelfde tijd. In het verleden hadden we waarschijnlijk een interval moeten instellen waarbij elke functie herhaaldelijk werd gepolled om te controleren of deze was teruggekeerd, en wachten tot ze allemaal gedaan hadden voordat ze verder gingen. Nu kunnen we al deze handmatige tracking delegeren aan jQuery om deze automatisch voor ons af te handelen. We gebruiken twee hulpprogramma-functies in dit voorbeeld: De Vervolgens maken we enkele variabelen; we stellen een array in met verkorte dagnamen, met zondag (of zon) als het eerste item in de array. Dagen in JavaScript-datums zijn gebaseerd op nul, waarbij zondag altijd wordt weergegeven als dag 0. Vervolgens maken we een Datum object met behulp van de Vervolgens maken we een andere array met drie items: het eerste item krijgt de juiste dag van de week van de eerste array die we binnen deze functie hebben gemaakt, het volgende item krijgt de gelokaliseerde datum en het laatste item de gelokaliseerde tijd. Ten slotte retourneren we de inhoud van de array nadat we eraan zijn toegevoegd. We kunnen eenvoudig gebruik maken van string-aaneenschakeling om deze datastring te bouwen, maar toetreding tot array-items is veel sneller dan handmatig bouwen van strings. De Vervolgens testen we de tekst om te zien of deze gebruikersnamen bevat; als dit het geval is, splitsen we de tekenreeks bij elke instantie van een gebruikersnaam. Dit geeft ons een array met items die platte tekst of een gebruikersnaam zijn. Vervolgens doorlopen we elk item in deze array en controleren of elk item de bevat Dat is het; zodra we onze objecten hebben opgeslagen, geeft de functie het nieuwe terug Nu we onze verwerkte JSON-gegevens hebben, kunnen we verder gaan naar het laatste deel van het voorbeeld: sjabloneren. In de anonieme functie doorgegeven aan de Deze code past eenvoudig de sjablonen toe met behulp van de methode jQuery templating plugin Schakel terug naar de HTML en voeg eerst het volgende toe jQuery-sjablonen worden toegevoegd aan de HTML-pagina met Deze sjabloon is veel eenvoudiger omdat we geen geneste sjablonen gebruiken of een iteratie uitvoeren. We voegen eenvoudigweg de gegevens van elke JSON-matrix in met behulp van de Nu we de sjablonen hebben toegepast en onze widget hebben ingevuld, kunnen we nog enkele CSS-stijlen toevoegen om de nieuwe elementen die zijn toegevoegd op te ruimen; in tweetbox.css voeg de volgende code toe aan het einde van het bestand: Sla het bestand op, onze pagina zou nu als volgt moeten verschijnen: Er is nog een ding dat we waarschijnlijk zouden moeten doen: op dit moment werkt onze functie voor het formatteren van e-mails niet in IE omdat IE de Dit moet direct vóór de scriptverwijzing naar onze worden toegevoegd In deze zelfstudie hebben we gekeken naar enkele van de meer geavanceerde functies van jQuery-sjablonen, zoals item-iteratie met Een belangrijk punt is dat het nieuwe templating-systeem van jQuery ons in staat stelt om ons gedrag en de presentatielagen beter van elkaar te scheiden door alle HTML-fragmenten uit de Sommigen beweren misschien dat we nu gewoon de tegenovergestelde situatie hebben en gewoon meer hebben Ik denk echter dat dit oneindig veel te verkiezen is boven het alternatief. Elementen in het formaat We hebben ook gekeken naar het uitstekende nieuwe Heel erg bedankt voor het lezen en laat het me weten als je nog vragen hebt!#someElement in een nieuw
Ermee beginnen
DOCTYPE en meta charset element. We linken naar een aangepaste stijlpagina, die we in een oogwenk zullen maken, en om huidige versies van IE8 en lager te ondersteunen, gebruiken we een voorwaardelijke opmerking om te linken naar de door Google gehoste pagina. html5shiv het dossier. Gebruik makend van
terzijde is in dit geval een geschikte buitencontainer. We geven het een ID kaart voor eenvoudig selecteren en stylen., een afbeelding en de bio in een standaard . Wijzig deze gerust naar uw eigen gegevens bij het reconstrueren van het voorbeeld. We zouden al deze items kunnen krijgen van de JSON-aanroep die we doen wanneer we de gegevens opvragen, maar als er een kleine vertraging is in het verzoek bij het laden van de pagina, zou de bezoeker naar een aantal lege vakken kunnen blijven staren, dus deze informatie hard coderen in de widget is opnieuw geschikt. Als we een plug-in voor andere ontwikkelaars zouden maken om te consumeren, kunnen we dit zeker niet doen, maar als we dit aan onze eigen site of een specifieke klantsite toevoegen, is dit een haalbare aanpak. en elementen. Het tabblad Vrienden wordt standaard weergegeven, dus de koppeling voor dit tabblad heeft de klasse op verbonden. In een groter project konden we natuurlijk jQuery UI-tabbladen gebruiken, maar ik wilde niet dat de tutorial de focus verloor en het is niet de moeite om deze functionaliteit zelf handmatig toe te voegen.tmpl (templating) plug-in, wat ons de mogelijkheid geeft om jQuery-sjablonen te gebruiken. ID kaart van voeden, en drie containers voor respectievelijk de tweets, vrienden en volgers, die ook hebben ID kaart attributen voor eenvoudig selecteren. We nemen ook een op element voor bezoekers waarvoor mogelijk scripting is uitgeschakeld (als er al een daadwerkelijk bestaat), wat zich binnen het gebied met de standaardtabinhoud bevindt. Merk op dat we ook een plug-in gebruiken - dit is de tmpl (templating) plug-in, wat ons de mogelijkheid geeft om jQuery-sjablonen te gebruiken. Dit bestand kan hier worden gedownload#tweetbox display: block; Breedte: 300 pixels; padding: 10px; border: 1px solid #aaa; -moz-border-radius: 5px; border-radius: 5px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; background-color: #eee; #tweetbox img weergave: blok; #user margin-bottom: 10px; float: left; #user h2 margin: 0 0 10px 0; position: relative; font-size: 18px; #user img float: left; #user p width: 230px; margin: 0; position: relative; float: left; font-size: 10px; color: # 333; #user img weergave: blok; margin-right: 10px; rand: 3px vast # 333; #tools marge: 0; * Margin-bottom: -10px; padding: 0; beiden opschonen; list-style-type: none; #tools li float: left; #tools een display: block; hoogte: 20px; opvulling: 3px 24px; border: 1px solid #aaa; border-bottom: none; -moz-border-radius: 5px 5px 0 0; grensradius: 5px 5px 0 0; margin-right: -1px; position: relative; font-size: 14px; schetsen: none; background-color: # d6d6d6; achtergrondafbeelding: -webkit-gradiënt (lineair, linksboven, linksonder, kleur-stop (0,5, # E8E8E8), kleur-stop (0, #DBDBDB), kleur-stop (0,5, # D6D6D6)); achtergrondafbeelding: -moz-lineair-gradiënt (middenboven, # E8E8E8 50%, #DBDBDB 0%, # D6D6D6 50%); een text-decoration: none; color: # 333; #tools .on height: 21px; margin-top: -1px; top: 1px; #feed width: 298px; border: 1px solid #aaa; beiden opschonen; background-color: # d6d6d6; #feed> div display: none; noscript display: block; padding: 10px; font-size: 13px; color: # 333;
tweetbox.css in dezelfde map als de HTML-pagina. Dit is slechts een beetje een lay-outstijl voor onze widget. Er zijn een paar CSS3-aardigheden voor geschikte browsers: een actie met een afgeronde hoek (merk op dat we het niet langer nodig hebben) -webkit- voorvoegsel van de verkoper voor afgeronde hoeken in de nieuwste webkit-browsers!) en enkele hellingen voor de tabbladen. Een punt van aandacht is dat we alle containers in het feed-element verbergen, behalve degene met de klas actief. Op dit punt (en met JS uitgeschakeld) zou de widget er zo uit moeten zien:
Het script toevoegen
(functie ($) // tabs var tweetbox = $ ("# tweetbox"), tweetData = null, friendData = null, followData = null; tweetbox.find ("# tools a"). klik (functie (e) e.preventDefault (); var link = $ (this), target = link.attr ("href"). split ("#") [1]; tweetbox.find (". on"). removeClass ("on" ); link.addClass ("aan"); tweetbox.find ("# feed> div"). hide (); tweetbox.find ("#" + doel) .show (););) (jQuery) ; tweetbox.js in dezelfde map als de HTML-pagina. Het is allemaal vrij eenvoudig, en omdat het niet echt de focus van deze tutorial is, zal ik er niet te veel op ingaan. Alles wat we doen is alias het tekenreekspersonage in een anonieme functie, die we meteen uitvoeren - meer voor goed gebruik dan pure noodzaak in dit voorbeeld - en vervolgens een selector in de cache plaatsen voor de belangrijkste buitenste container voor de widget. We initialiseren ook drie variabelen voor later gebruik en stellen hun waarden in op nul.ID kaart van het tabblad om te tonen van de href van de link waarop is geklikt, wordt de klassenaam verwijderd op van de tabkoppelingen en voegt het vervolgens weer toe aan de link waarop is geklikt. We verbergen vervolgens alle tabbladen voordat het geselecteerde tabbladvenster wordt weergegeven.
De gegevens ophalen
$ .ajaxSetup (dataType: "jsonp"); functie getTweets () $ .ajax ("http://api.twitter.com/statuses/user_timeline/danwellman.json", success: function (data) var arr = []; for (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 () methode om de data type optie om jsonp voor alle volgende aanvragen. Aangezien dit de data type gebruikt door elk van onze verzoeken, is het logisch om de optie één keer in te stellen.Ajax() methode om een verzoek in te dienen bij de webservice die elke verzameling gegevens retourneert waarmee we gaan werken, de user_timeline, vrienden en volgelingen respectievelijk. In het instellingenobject voor elke aanvraag definiëren we een succes handler die wordt uitgevoerd zodra elk afzonderlijk verzoek met succes is teruggekeerd. Elk van deze verzoeken retourneert een JSON-object dat mogelijk maximaal 100 objecten bevat vol met Twitter-gegevens.succes handler maken we een nieuwe array, die op zijn beurt een reeks objecten bevat die alleen de gegevens bevatten die we daadwerkelijk gaan gebruiken. Om ervoor te zorgen dat de gegevens in de juiste indeling voor JSON worden opgeslagen, waarbij elke eigenschapsnaam een tekenreeks moet zijn, gebruiken we de notatie met vierkante haakjes om de eigenschapsnamen in tekenreeksindeling in te stellen.user_timeline verzoek slaat het op id-tekenreeks van de tweet die kan worden gebruikt als onderdeel van een URL die verwijst naar de tweet, evenals het opslaan van het resultaat van twee hulpprogramma-functies. De eerste van deze functies maakt een opgemaakte gegevenstekenreeks die de door Twitter geretourneerde datum converteert naar iets dat een beetje mooier is en dat wordt gelokaliseerd op de machine van de kijker. We formatteren ook de tweet-tekst, zodat we deze kunnen verfraaien @gebruikersnamen gevonden in de tekst. We zullen zowel de datum- als de tweet-formatteerfuncties binnenkort bekijken.nul variabelen die we bovenaan het script hebben geplaatst.getTweets (), getFriends () en getFollowers () functies handmatig. In plaats daarvan gebruiken we jQuery's nieuw wanneer() methode om ze allemaal tegelijk op te roepen. Met deze methode kunt u deze functies volledig uitvoeren en kunt u bijhouden wanneer elke functie is teruggekeerd. We ketenen het dan() methode na de wanneer() methode. Nadat alle gespecificeerde functies succesvol zijn teruggekeerd, wordt de callback-functie doorgegeven aan de dan() methode zal worden uitgevoerd.
wanneer() methode maakt een uitgesteld object dat de functies beheert die we als argumenten opgeven. dan() worden genoemd. Andere handlers kunnen ook aan de. Worden geketend wanneer() uitgesteld object, zoals fail (), die zou worden uitgevoerd als een of meer van de functies die aan het uitgestelde object zijn doorgegeven, zijn mislukt.
Utility functies
convertDate () en breakTweet (). De code voor deze functies is als volgt:// formaat datum convertDate = function (obj, i) // tijdzone-offset verwijderen in IE if (window.ActiveXObject) obj [i] .created_at = obj [i] .created_at.replace (/ [+] \ d 4 /, ""); // mooie datum in systeemlocale var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], date = new Date (obj [i] .created_at), geformatteerd TijdstemampArray = [dagen [obj [i] .created_at], date.toLocaleDateString (), date.toLocaleTimeString ()]; return formattedTimeStampArray.join (""); // format text breakTweet = function (obj, i) // atify var text = obj [i] .text, brokenTweet = [], atExpr = / (@ [\ w] +) /; if (text.match (atExpr)) var splitTweet = text.split (atExpr); voor (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 () functie is relatief eenvoudig: we controleren eerst of de gebruikte browser een variant van IE is door ernaar te zoeken window.ActiveXObject. Als dit wordt gevonden, gebruiken we JavaScript vervangen() methode om de Timezone Offset te verwijderen die wordt geleverd als onderdeel van de string die is opgenomen in de gemaakt bij eigenschap van het JSON-object geretourneerd door Twitter. Deze methode neemt het reguliere expressiepatroon waarnaar moet worden gezocht en een lege tekenreeks om het te vervangen. Hierdoor stopt IE verstikking op de + teken wanneer de tekenreeks wordt doorgegeven aan de nieuwe datum bouwer.nieuwe datum() constructor en geef de datumreeks door die is opgeslagen in de gemaakt bij eigenschap van het object dat we hebben doorgegeven aan de functie.breakTweet () functie is iets complexer. Wat we moeten doen is de platte tekst omzetten in een JSON-array, waarbij elk arrayitem een object is dat een van beide bevat Naam of Tekst zodat we de gegevens kunnen gebruiken met een sjabloon (meer informatie over de sjablonen hierna). Eerst slaan we de tekst op van het door Twitter geretourneerde object (die we doorgeven aan de functie). We maken ook een lege array om de objecten in op te slaan en definiëren de reguliere expressie die overeenkomt @gebruikersnamen.@ symbool; als dat zo is, weten we dat het een gebruikersnaam is en sla deze dus op in een object met de sleutel Naam. Als het de. Niet bevat @ symbool we bewaren het met de sleutel Tekst. Het object wordt vervolgens in de array geduwd. Ook als de hele tekst geen een bevat @ karakter we opslaan het met de sleutel Tekst.brokenTweet array naar de user_timeline succesfunctie en wordt opgeslagen in het hoofd-JSON-object voor gebruik met onze sjablonen. Naast het verfraaien van de tekst, zouden we ook kunnen linkify en hashify als we wilden. Ik laat dat aan jou over om te implementeren.
templating
dan() methode in het laatste codegedeelte, er was een opmerking en niets anders. Voeg direct na deze opmerking de volgende code toe:// apply templates tweetbox.find ("# tweetTemplate"). tmpl (tweetData) .appendTo ("# tweetList"); tweetbox.find ( "# ffTemplate") tmpl (friendData) .appendTo ( "# vriendenlijst."); tweetbox.find ( "# ffTemplate") tmpl (followData) .appendTo ( "# followList."); // toon tweets tweetbox.find ("# tweets"). show (); tmpl (). De methode accepteert de JSON die de gegevens bevat die de sjabloon zal gebruiken. Vervolgens geven we aan waar in het document de sjabloonelementen moeten worden ingevoegd. Elke reeks sjablonen voegt de elementen toe aan de respectieve lege container in de widget. De tmpl () methode wordt aangeroepen op drie elementen, maar deze elementen bestaan nog niet. We zullen deze volgende toevoegen.
De jQuery-sjablonen toevoegen
$ Data sjabloon item formaat.
Afronden
#feed ul opvulling: 0; margin: 0; #feed li opvulling: 0; border-bottom: 1px solid #aaa; list-style-type: none; font-size: 11px; #feed li: last-child, #feed li: last-child p border-bottom: none; #feed p opvulling: 10px; margin: 0; border-bottom: 1px solid #eee; achtergrondafbeelding: -webkit-gradiënt (lineair, linksonder, linksboven, kleur-stop (0,48, # c2c2c2), kleur-stop (0,71, # d6d6d6)); achtergrondafbeelding: -moz-lineaire gradiënt (midden onderaan, # c2c2c2 48%, # d6d6d6 71%); #feed p: after content: ""; display: block; Breedte: 100%; Hoogte: 0; beiden opschonen; .tweet-link display: block; margin-top: 5px; color: # 777; .img-link display: block; marge: 4px 10px 0 0; float: left; #feed .username a font-size: 14px; font-weight: bold; #feed .bio display: block; margin-top: 10px;
split () reguliere expressiemethode. Om dit probleem te verhelpen, kunnen we een uitstekende JavaScript-patch gebruiken die is gemaakt door Steven Levithan. Het kan worden gedownload van: http://blog.stevenlevithan.com/archives/cross-browser-split en kan op de pagina worden opgenomen met een voorwaardelijke opmerking op dezelfde manier als waarop we de html5shiv het dossier:tweetbox.js het dossier.
Samenvatting
elk en conditionals met als en anders.
.js bestand en terug in de .html het dossier. >$ ("wanneer() methode die wordt aangeboden in jQuery 1.5, waarmee we een reeks asynchrone verzoeken kunnen beheren en code kunnen uitvoeren zodra ze allemaal zijn voltooid. Dit houdt in het gebruik van de dan() methode om een uit te voeren functie te specificeren als de asynchrone functies allemaal zijn geretourneerd.
