Proprio questa settimana, il team di jQuery ha annunciato che il plug-in per i modelli di Microsoft (insieme ad un altro paio) è ora ufficialmente supportato. Ciò significa che il plugin verrà ora aggiornato e aggiornato direttamente dal team principale. In questo video tutorial, esamineremo gli elementi essenziali del plug-in e perché è così fantastico.

---

Come esempio rapido, faremo di nuovo riferimento all'esempio dell'API di ricerca Twitter di venerdì (si pensi a Bieber). L'unica differenza è che, questa volta, utilizzeremo un modello HTML per allegare i dati restituiti, piuttosto che confondere il nostro JavaScript!

Mesi fa, Andrew Burgess ti ha presentato questo plugin, ancora in versione beta. Tuttavia, oggi integreremo il plug-in nel codice reale.

Iscriviti alla nostra pagina YouTube per guardare tutti i tutorial video!

---

Corso intensivo

---

Passaggio 1: importa jQuery e il Templating Plugin

---

Passaggio 2: crea il tuo modello

• Si noti come questo modello è incluso all'interno copione tag, e che a genere di text / x-jquery-tmpl è stato applicato.
• Facciamo riferimento ai nomi delle variabili del modello anteponendo un segno di dollaro e avvolgendo il nome della proprietà all'interno di parentesi graffe.
• Se le dichiarazioni possono essere create usando due serie di parentesi graffe, come dimostrato sopra. (Vedi screencast per maggiori dettagli.)

---

Passaggio 3: Trova alcuni dati da renderizzare!

In questo caso, faremo una rapida ricerca dell'API di ricerca di Twitter.

Grazie a Peter Galiba (vedi commenti), per raccomandare il più elegante $ .map soluzione, mostrata sopra.

Fare riferimento allo screencast per un completo passaggio del codice sopra. La cosa più importante, però, è che stiamo creando una serie di oggetti. Questo servirà da dati per il modello che abbiamo creato nel passaggio due. Nota come i nomi delle proprietà:

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

... corrispondono alle variabili del modello che abbiamo creato nel passaggio due.

---

Passaggio 4: dove deve essere visualizzato il mark-up?

Successivamente, dobbiamo designare dove il mark-up e i dati devono essere resi. Creeremo un elenco non ordinato per questo scopo.

---

Passaggio 5: rendering dei dati

Infine, alleghiamo i dati al modello e lo aggiungiamo all'elenco non ordinato (#tweets) creato nel passaggio quattro.

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

1. Trovare la copione (modello) elemento con un id di tweets.
2. Allegare il cinguettio array a questo modello.
3. Aggiungi il nuovo mark-up al DOM.

---

Fonte finale

           
 Tweet su Nettuts+ 
  
   

---

Allora, cosa ne pensi?

Ora che il plugin di template è ufficialmente supportato dal core team jQuery, lo userete nei vostri progetti futuri?