Snabbtips Arbetar med den officiella jQuery Templating Plugin

Bara denna vecka meddelade jQuery-teamet att Microsofts templating plugin (tillsammans med ett par andra) nu stöds officiellt. Vad det innebär är att plugin nu ska bibehållas och uppdateras direkt av kärnteamet. I den här videotutorialen granskar vi de viktigaste delarna av pluginet och varför det är så häftigt.

Som ett snabbt exempel kommer vi återigen att referera till Twitter-sök API-exemplet från fredag (tänk Bieber). Den enda skillnaden är att den här gången använder vi en HTML-mall för att bifoga den returnerade data, snarare än att lera upp vår JavaScript!

Månader sedan introducerade Andrew Burgess dig till det här pluginet, fortfarande i beta. Idag integrerar vi pluginprogrammet i live-live-kod.

Prenumerera på vår YouTube-sida för att titta på alla videohandledning!

Snabbkurs

Steg 1: Importera jQuery och Templating Plugin

Steg 2: Skapa din mall

Lägg märke till hur denna mall är inlindad inom manus taggar, och att a typ av text / x-jquery-tmpl har tillämpats.
Vi hänvisar till namnsvariabelnamn genom att lägga ut ett dollartecken och förpacka egenskapsnamnet inom lockiga axlar.
Om uttalanden kan skapas genom att använda två uppsättningar av lockiga hängslen, vilket visas ovan. (Se skärmdump för mer detaljer.)

Steg 3: Hitta lite data att återföra!

I det här fallet gör vi en snabbsökning av Twitter Search API.

Tack vare Peter Galiba (se kommentarer), för att rekommendera den mer eleganta $ MAP lösning, som visas ovan.

Se skärmdumpen för en fullständig genomgång av koden ovan. Viktigast är dock att vi skapar en rad objekt. Detta kommer då att fungera som data för mallen som vi skapade i steg två. Lägg märke till hur egendomsnamnen är:

 användarnamn: obj.from_user, tweet: obj.text, imgSource: obj.profile_image_url, geo: obj.geo

... motsvarar de mallvariabler som vi skapade i steg två.

Steg 4: Var borde Mark-up lämnas?

Därefter måste vi utse var Mark-up och data ska göras. Vi skapar en oorderad lista för detta ändamål.

Steg 5: Rendera data

Slutligen bifogar vi data till mallen och lägger den till den oordnade listan (#tweets) som vi skapade i steg fyra.

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

Hitta manus (mall) element med en id av tweets.
Fäst den Twitter array till denna mall.
Lägg till den nya markeringen upp till DOM.

Slutlig källa

            Tweets om Nettuts+

Så vad tycker du?

Nu när templating plugin officiellt stöds av core jQuery-teamet, kommer du att använda det i dina framtida projekt?

Koda