Bare denne uken annonserte jQuery-teamet at Microsofts templerende plugin (sammen med et par andre) nå støttes offisielt. Hva dette betyr er at pluginet nå skal opprettholdes og oppdateres direkte av kjerneteamet. I denne videoopplæringen vurderer vi viktigheten av pluginet, og hvorfor det er så kjempebra.

---

Som et raskt eksempel, vil vi igjen referere til Twitter Search API-eksemplet fra fredag ​​(tenk Bieber). Den eneste forskjellen er at denne gangen bruker vi en HTML-mal for å feste de returnerte dataene, i stedet for å mudrede våre JavaScript!

For måneder siden presenterte Andrew Burgess deg for dette pluginet, fremdeles i beta. Imidlertid integrerer vi plugin-modulen i live-live-kode i dag.

Abonner på vår YouTube-side for å se alle videoopplæringene!

---

Lynkurs

---

Trinn 1: Importer jQuery og Templating Plugin

---

Trinn 2: Lag din mal

• Legg merke til hvordan denne malen er pakket inn i manus koder, og at a type av tekst / x-jquery-tmpl har blitt brukt.
• Vi refererer til variabler for malvarier ved å prependere et dollarskilt og pakke inn eiendomsnavnet i krøllete bånd.
• Hvis uttalelser kan opprettes ved å bruke to sett med krøllete braces, som vist ovenfor. (Se screencast for flere detaljer.)

---

Trinn 3: Finn noen data å gi tilbake!

I dette tilfellet gjør vi et raskt søk av Twitter Search API.

Takk til Peter Galiba (se kommentarer), for å anbefale den mer elegante $ .map løsning, vist ovenfor.

Se på skjermbildet for en full gjennomgang av koden ovenfor. Viktigst av alt er det at vi lager en rekke objekter. Dette vil da tjene som data for malen som vi opprettet i trinn to. Legg merke til hvordan eiendommens navn:

 brukernavn: obj.from_user, tweet: obj.text, imgSource: obj.profile_image_url, geo: obj.geo

... tilsvarer malvariabler som vi opprettet i trinn to.

---

Trinn 4: Hvor skal Mark-up bli levert??

Deretter må vi utpeke hvor Mark-up og data skal gjengis. Vi oppretter en uordnet liste for dette formålet.

---

Trinn 5: Gjenopprett dataene

Til slutt legger vi dataene til malen, og legger den til den uordnede listen (#tweets) som vi opprettet i trinn fire.

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

1. Finn manus (mal) element med en id av tweets.
2. Fest twitter array til denne malen.
3. Legg til det nye merket opp til DOM.

---

Endelig kilde

           
 Tweets om Nettuts+ 
  
   

---

Så hva tror du?

Nå som templeringspluggen er offisielt støttet av kjernen jQuery-teamet, vil du bruke den i dine fremtidige prosjekter?