Share
I denne opplæringen tar vi en titt på hvordan jQuery's beta-templeringssystem kan legges til utmerket bruk for å fullstendig avkoble vår HTML fra våre skript. Vi tar også en rask titt på jQuery 1.5s helt nyoppussede AJAX-modul.
Templering er en newish (den er fortsatt i beta, så det er sannsynlig at det vil endre seg litt etter hvert som det modnes og migrerer i kjernen, men det har eksistert i det aller beste året), enormt kraftig jQuery-funksjon som lar oss spesifisere en mal som skal brukes når du bygger DOM-strukturer via skript, noe som jeg er sikker på at vi alle gjør på nesten daglig basis.
Det har alltid vært utrolig enkelt når du bruker jQuery til å gjøre noe slikt:
Accentsconagua
$ ("# someElement"). barn (). hver (funksjon () $ (dette) .wrap ($ (""));; Templating gjør det mulig for oss å fjerne disse strengbaserte HTML-kodene fra vår oppførsel.
Dette vil bare vikle hvert barnelement av Templering gjør det mulig for oss å fjerne disse strengbaserte utdragene av HTML fra vårt oppføringslag, og sett dem tilbake fast der de tilhører innholdslaget. Mens vi gjør det, kan vi også sjekke ut en av de helt nye, superkule AJAX-funksjonene i jQuery 1.5 - utsatte objekter. I dette eksemplet vil vi bygge en Twitter-widget som ikke bare vil laste inn noen av våre siste tweets, men også liste noen venner, følgere og forslag. Jeg valgte Twitter for dette eksemplet fordi det utsender JSON i det formatet vi trenger; det er enkelt og morsomt. Så la oss komme i gang; widgeten selv vil bli bygget fra følgende underliggende mark-up: Vi bruker HTML5 og har inkludert den forenklede Denne widgeten vil trolig gå inn i et sidebjelke, og være forskjellig fra det faktiske innholdet på siden den vises på, men relatert til nettstedet som helhet. Med det i tankene føler jeg en Fortsett med vårt oppslag, vi har noen detaljer om Twitter-brukeren hvis tweets er oppført, inkludert navnet i en Deretter har vi kategoriene som skal brukes til å bytte mellom tweets, venner og tilhenger. Disse er bygget fra en enkel samling av Legg merke til at vi også bruker et plugin - dette er Endelig har vi elementene som vil holde hver datastrøm; Vi har en ytre beholder med en Ta en kopi nå og hold den i samme mappe som nettsiden vi nettopp har laget. Jeg nevnte et tilpasset stilark tidligere; la oss legge til det i akkurat nå; i en ny fil i teksteditoren legg til følgende kode: Lagre denne filen som La oss sette det grunnleggende skriptet sammen og få disse kategoriene til å fungere. I en annen ny fil i teksteditoren legger du til følgende kode: Lagre denne filen som Vi må velge elementer gjentatte ganger i hele koden; så caching en referanse til den ytre beholderen bidrar til å minimere antall jQuery-objekter vi trenger å lage. Vi setter deretter en klikkbehandler for de fanefeltene som blir Nå begynner den virkelige moroa; Vi kan gjøre forespørsler til Twitter for å få våre tre datasett og benytte jQuery's templating plugin for å lage de nødvendige DOM-elementene ved hjelp av dataene vi får fra forespørslene. Vi får dataene først, og legger til malene. Etter klikkbehandleren for verktøykoblingene, legg til følgende kode: Først bruker vi jQuery's Vi definerer deretter tre standardfunksjoner; innen hver funksjon bruker vi jQuery's For å sikre at dataene lagres i riktig format for JSON, bruker vi kvadrat-brakett notasjon. Vi trenger ikke så mye data, så i hver De Funksjonene for å hente vennene og tilhengerlister er ganske like identiske. Igjen, omdøper vi egenskapene vi skal jobbe med når vi bygger våre objekter og lagrer dem i hver gruppe. Alle tre av våre suksesshåndterere lagrer de resulterende 5-punktsarrayene i Legg merke til at vi ikke påberoper hver av våre De Når funksjonene er alle returnert, er den utsatte objektet løst og eventuelle funksjoner registrert hos Dette er utrolig; Vi ønsker å gjøre alle tre forespørsler, men vi har ingen måte å vite på forhånd hvilken av disse vil bli returnert sist, så det er umulig å bruke en forespørsels tilbakeringingsfunksjon hvis vi ønsker å behandle dataene som returneres fra alle funksjonene på samme tid. Tidligere hadde vi sannsynligvis måtte sette opp et intervall som flere ganger polled hver funksjon for å sjekke om den hadde kommet tilbake, og vent til alle hadde før de fortsatte. Nå kan vi delegere all denne manuelle sporing til jQuery for å håndtere for oss automatisk. Vi bruker to bruksfunksjoner i dette eksemplet: De Deretter lager vi noen variabler; Vi angir en matrise som inneholder forkortede dagnavne, med søndag (eller sol) som det første elementet i matrisen. Dager i JavaScript-datoer er nullbaserte, og søndag vises alltid som dag 0. Vi lager deretter en Dato objekt ved hjelp av Vi lager deretter en annen matrise som inneholder tre elementer: Det første elementet får den riktige uken fra den første gruppen vi opprettet i denne funksjonen, neste objekt får lokalisert dato, og det siste elementet får lokalisert tid. Til slutt returnerer vi innholdet i matrisen etter at vi har sluttet seg til det. Vi kunne ganske enkelt bruke strengkonsentrasjon for å bygge denne datastrengen, men det er mye raskere å legge sammen arrayelementer enn å bygge strenger manuelt. De Vi tester deretter teksten for å se om den inneholder noen brukernavn; Hvis det gjør det, deler vi tekststrengen ved hver forekomst av et brukernavn. Dette vil gi oss en matrise som inneholder elementer som er enten vanlig tekst eller et brukernavn. Vi sykler deretter gjennom hvert element i denne gruppen og kontrollerer om hvert element inneholder Det er det; Når vi har lagret våre objekter, returnerer funksjonen den nye Nå som vi har våre behandlede JSON-data, kan vi gå videre til den siste delen av eksemplet: templating. I den anonyme funksjonen passert til Denne koden bruker bare mallene ved hjelp av jQuery templating plugin-metoden Bytt tilbake til HTML og legg til følgende først jQuery-maler legges til HTML-siden ved hjelp av Denne malen er mye enklere fordi vi ikke bruker nestede maler eller gjør noen iterasjon, vi setter ganske enkelt inn dataene fra hvert JSON-array ved hjelp av Nå som vi brukte maler og befolket vår widget, kan vi legge til noen flere CSS-stiler for å rydde opp de nye elementene som er lagt til; i tweetbox.css legg til følgende kode til slutten av filen: Lagre filen, vår side skal nå vises som følger: Det er fortsatt en ting vi bør nok gjøre: for øyeblikket fungerer ikke tweetformateringsfunksjonen i IE på grunn av hvordan IE behandler Dette bør legges direkte før skriptreferansen til vår I denne opplæringen så vi på noen av de mer avanserte funksjonene i jQuery templating, for eksempel item iteration with Et sentralt punkt er at det nye templeringssystemet fra jQuery gjør at vi bedre kan skille våre oppførings- og presentasjonslag, flytter alle HTML-utklipp ut av Noen kan hevde at vi nå bare har motsatt situasjon og bare har mer Imidlertid tror jeg dette er uendelig bedre enn alternativet. Elementer i formatet Vi så også på den gode nye Takk så mye for å lese og gi meg beskjed hvis du har noen spørsmål!#someElement i en ny
Starter
DOCTYPE og meta charset element. Vi knytter til et egendefinert stilark, som vi oppretter i et øyeblikk, og for å støtte dagens versjoner av IE8 og lavere, bruker vi en betinget kommentar for å koble til Google-vert html5shiv fil. Ved hjelp av
side er en passende ytre beholder i dette tilfellet. Vi gir det en id for enkel valg og styling., et bilde og bio i en standard . Du er velkommen til å endre disse til dine egne detaljer når du rekonstruerer eksemplet. Vi kunne få alle disse elementene fra JSON-anropet som vi skal lage når vi ber om dataene, men hvis det er en liten forsinkelse i forespørselen ved sidebelastning, kan den besøkende fortsette å stirre på en haug med tomme bokser, så hardkodende denne informasjonen i widgeten er igjen, passende. Hvis vi gjorde et plugin for andre utviklere å konsumere, kunne vi absolutt ikke gjøre dette, men når vi legger til dette på vårt eget nettsted eller på en bestemt kundes nettsted, er dette en mulig tilnærming. og elementer. Vennerfanen vises som standard, så lenken for denne kategorien har klassen på festet til den. I et større prosjekt kunne vi selvfølgelig bruke jQuery UI-faner, men jeg ville ikke at opplæringen skulle miste fokus, og det er ingen plage å legge til denne funksjonaliteten oss manuelt.tmpl (templerende) plugin, som gir oss muligheten til å bruke jQuery-maler. id av mate, og tre beholdere for tweets, venner og tilhenger henholdsvis, som også har id attributter for enkel valg. Vi inkluderer også a element for besøkende som kan ha skripting deaktivert (hvis noen faktisk eksisterer lenger), som ligger innenfor standardfeltinnholdsområdet. Legg merke til at vi også bruker et plugin - dette er tmpl (templerende) plugin, som gir oss muligheten til å bruke jQuery-maler. Denne filen kan lastes ned herfra#tweetbox display: block; bredde: 300 piksler; padding: 10px; grense: 1px solid #aaa; -moz-border-radius: 5 px; border-radius: 5 px; font-familie: "Trebuchet MS", Arial, Helvetica, sans-serif; background-color: #eee; #tweetbox img display: block; #user margin-bottom: 10px; float: venstre; #user h2 margin: 0 0 10px 0; stilling: i forhold; font-size: 18 piksler; #user img float: left; #user p bredde: 230px; margin: 0; stilling: i forhold; float: venstre; font-size: 10px; color: # 333; #user img display: block; margin-right: 10px; border: 3px solid # 333; #tools margin: 0; * Margin-bottom: -10px; padding: 0; klar: begge; list-style-type: none; #tools li float: left; #tools a display: block; høyde: 20 piksler; polstring: 3px 24px; grense: 1px solid #aaa; border-bottom: none; -moz-grense-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; margin-right: -1px; stilling: i forhold; font-size: 14 piksler; skissere: none; background-color: # d6d6d6; bakgrunnsbilde: -webkit-gradient (lineær, venstre topp, venstre bunn, fargestopp (0.5, # E8E8E8), fargestopp (0, #DBDBDB), fargestopp (0.5, # D6D6D6)); bakgrunnsbilde: -moz-lineær gradient (sentertopp, # E8E8E8 50%, #DBDBDB 0%, # D6D6D6 50%); en tekst-dekorasjon: ingen; color: # 333; #tools .on height: 21px; margin-top: -1px; top: 1px; #feed width: 298px; grense: 1px solid #aaa; klar: begge; background-color: # d6d6d6; #feed> div display: none; noscript display: block; padding: 10px; font-size: 13 piksler; color: # 333;
tweetbox.css i samme katalog som HTML-siden. Dette er bare litt av layout styling for vår widget. Det er et par CSS3-niceties for dyktige nettlesere: Enkel avrundet-handling (legg merke til at vi ikke lenger trenger det -webkit- leverandør prefiks for avrundede hjørner i de nyeste webkit nettleserne!) og noen gradienter for fanene. Et poeng å merke seg er at vi skjuler alle beholderne i materiellelementet, unntatt det som er med klassen aktiv. På dette tidspunktet (og med JS deaktivert) må widgeten se slik ut:
Legge til skriptet
(funksjon ($) // tabs var tweetbox = $ ("# tweetbox"), tweetData = null, friendData = null, followData = null; tweetbox.find ("# verktøy a"). e.preventDefault (); var link = $ (dette), target = link.attr ("href"). splitt ("#") [1]; tweetbox.find (". ); link.addClass ("on"); tweetbox.find ("# feed> div"). skjul (); tweetbox.find ("#" + mål) .show (););) (jQuery) ; tweetbox.js i samme katalog som HTML-siden. Det er alt ganske rett frem, og da det egentlig ikke er hovedfokuset i denne opplæringen, vil jeg ikke gå inn i det for mye. Alt vi gjør er alias strengkarakteren i en anonym funksjon, som vi utfører med en gang - mer for god praksis enn det som er nødvendig i dette eksemplet - og deretter cacher en velger for den ytre hovedbeholderen for widgeten. Vi initialiserer også tre variabler for bruk senere, og setter deres verdier til null.id av fanen som skal vises fra href av lenken som ble klikket, fjerner klassenavnet på fra fanebladene og legger den tilbake til lenken som ble klikket. Vi skjuler så alle fanepanelene, før du viser det valgte fanepanelet.
Få dataene
$ .ajaxSetup (dataType: "jsonp"); funksjon getTweets () $ .ajax ("http://api.twitter.com/statuses/user_timeline/danwellman.json", suksess: funksjon (data) var ar = []; 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 () metode for å angi data-type alternativ til JSONP for alle påfølgende forespørsler. Som dette vil være data-type Brukes av hver av våre forespørsler, er det fornuftig å bare sette alternativet en gang.Ajax () Metode for å gjøre en forespørsel til webtjenesten som returnerer hvert sett med data vi skal jobbe med, user_timeline, venner og etterfølgere henholdsvis. I innstillingsobjektet for hver forespørsel definerer vi en suksess handler som vil bli utført når hver enkelt forespørsel returneres vellykket. Hver av disse forespørsler returnerer et JSON-objekt som potensielt inneholder opptil 100 objekter pakket full av Twitter-data.suksess handler vi lager et nytt utvalg, som igjen vil inneholde en serie objekter som bare inneholder dataene vi faktisk skal bruke. For å sikre at dataene lagres i riktig format for JSON, hvor hvert eiendomsnavn må være en streng, bruker vi kvadrat-brakett notasjon til å angi egenskapsnavn i strengformat.user_timeline forespørsel lagrer id-streng av tweet som kan brukes som en del av en nettadresse som peker på tweet, samt lagring av resultatet av to bruksfunksjoner. Den første av disse funksjonene oppretter en formatert datastreng som konverterer datoen returnert av Twitter til noe som er litt finere, og lokalisert til seerens maskin. Vi formaterer også tweetteksten slik at vi kan forkaste noen til brukernavn funnet i teksten. Vi ser på både datoen og tweet formatterfunksjonene kort tid.null variabler vi satt øverst på skriptet.getTweets (), getFriends () og getFollowers () Fungerer manuelt. I stedet bruker vi jQuery's nye når() metode for å påkalle dem alle samtidig. Denne metoden vil håndtere alle disse funksjonene, og vil holde styr på når hver enkelt har returnert. Vi kjedene deretter() metode etter når() metode. Når alle de angitte funksjonene er returnert, vil tilbakeringingsfunksjonen vi passere til deretter() Metoden vil bli utført.
når() Metode oppretter en utsatt objekt som styrer funksjonene vi angir som argumenter. deretter() er kalt. Andre håndterere kan også være kjedet til når() utsatt objekt, for eksempel mislykkes (), som ville bli utført hvis en eller flere av funksjonene som ble sendt til den utsatte objektet, mislyktes.
Utility Funksjoner
convertDate () og breakTweet (). Koden for disse funksjonene er som følger:// format dato convertDate = funksjon (obj, i) // fjern tidszonen offset i IE hvis (window.ActiveXObject) obj [i] .created_at = obj [i] .created_at.replace (/ [+] \ d 4 /, ""); // dato i systemlokal var dager = ["Sun", "Mån", "Tue", "Ons", "Thu", "Fri", "Lør"), dato = nytt Dato (obj [i] .created_at), formattedTimeStampArray = [dager [obj [i] .created_at], date.toLocaleDateString (), date.toLocaleTimeString ()]; returnere formatertTimeStampArray.join (""); // format tekst breakTweet = funksjon (obj, i) // atify var tekst = obj [i] .text, brokenTweet = [], atExpr = / (@ [\ w] +); hvis (text.match (atExpr)) var splitTweet = text.split (atExpr); for (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 () Funksjonen er relativt rett frem: Vi kontrollerer først om nettleseren i bruk er en variant av IE ved å lete etter window.ActiveXObject. Hvis dette er funnet, bruker vi JavaScript erstatte() metode for å fjerne Timezone Offset levert som en del av strengen som finnes i created_at Egenskapen til JSON-objektet returnert av Twitter. Denne metoden tar det vanlige uttrykksmønsteret til å lete etter, og en tom streng som erstatter den med. Dette stopper IE kvelning på + tegn når strengen sendes til ny dato konstruktør.ny dato () konstruktør, og passere i datastrengen lagret i created_at Egenskapen til objektet vi passerte inn i funksjonen.breakTweet () funksjonen er litt mer kompleks. Hva vi trenger å gjøre er å konvertere den vanlige teksten til et JSON-array hvor hvert arrayelement er et objekt som inneholder enten a Navn eller Tekst eiendom slik at vi kan bruke dataene med en mal (mer på malene neste). Først lagrer vi teksten fra objektet returnert av Twitter (som vi sender inn i funksjonen). Vi lager også et tomt utvalg for å lagre objektene i og definere det vanlige uttrykket som vil samsvare til brukernavn.@ symbol; hvis det gjør det, vet vi at det er et brukernavn og så lagrer det i et objekt med nøkkelen Navn. Hvis den ikke inneholder @ symbolet lagrer vi det med nøkkelen Tekst. Objektet skyves deretter inn i matrisen. Også, hvis hele teksten ikke inneholder en @ tegn vi lagrer det med nøkkelen Tekst.brokenTweet array til user_timeline suksessfunksjon og lagres i hoved JSON-objektet for bruk med våre maler. I tillegg til å forklare teksten, kan vi også linke og hashify hvis vi ønsket. Jeg la det opp til deg å implementere.
templating
deretter() metode i den siste kodeseksjonen, var det en kommentar og ingenting annet. Direkte etter denne kommentaren legger du til følgende kode:// bruke maler tweetbox.find ("# tweetTemplate"). tmpl (tweetData) .appendTo ("# tweetList"); tweetbox.find ( "# ffTemplate") tmpl (friendData) .appendTo ( "# friend."); tweetbox.find ( "# ffTemplate") tmpl (followData) .appendTo ( "# followList."); // vis tweets tweetbox.find ("# tweets"). show (); tmpl (). Metoden aksepterer JSON som inneholder dataene som malen vil bruke. Vi angir deretter hvor i dokumentet du skal legge inn malelementene. Hvert sett med maler legger elementene til den respektive tomme beholderen i widgeten. De tmpl () Metoden kalles på tre elementer, men disse elementene eksisterer ikke. Vi legger til disse neste.
Legge til jQuery-malene
$ Data mal elementformat.
Etterbehandling
#feed ul polstring: 0; margin: 0; #feed li padding: 0; grensebunn: 1px solid #aaa; list-style-type: none; font-size: 11px; #feed li: siste barn, #feed li: siste barn p border-bottom: none; #feed p padding: 10px; margin: 0; border-bottom: 1px solid #eee; bakgrunnsbilde: -webkit-gradient (lineær, venstre bunn, venstre topp, fargestopp (0,48, # c2c2c2), fargestopp (0.71, # d6d6d6)); bakgrunnsbilde: -moz-lineær-gradient (midtbunn, # c2c2c2 48%, # d6d6d6 71%); #feed p: etter content: ""; display: block; bredde: 100%; høyde: 0; klar: begge; .tweet-link display: block; margin-top: 5 px; color: # 777; .img-link display: block; margin: 4px 10px 0 0; float: venstre; #feed.username a font-size: 14px; font-vekt: bold; #feed .bio display: block; margin-top: 10px;
dele() vanlig uttrykksmetode. For å fikse dette problemet kan vi bruke en utmerket JavaScript patch opprettet av Steven Levithan. Den kan lastes ned fra: http://blog.stevenlevithan.com/archives/cross-browser-split og kan inkluderes på siden ved hjelp av en betinget kommentar på samme måte som vi la til html5shiv fil:tweetbox.js fil.
Sammendrag
Hver og conditionals med hvis og ellers.
.js fil og tilbake til .html fil. >$ ("når() metode gitt i jQuery 1.5, som tillater oss å administrere et sett med asynkrone forespørsler og utføre kode når de har fullført. Dette innebærer å bruke deretter() Metode for å spesifisere en funksjon som skal utføres når de asynkrone funksjonene er returnert.
