Erst in dieser Woche gab das jQuery-Team bekannt, dass das Templating-Plugin von Microsoft (zusammen mit ein paar anderen) nun offiziell unterstützt wird. Dies bedeutet, dass das Plugin nun direkt vom Kernteam gepflegt und aktualisiert wird. In diesem Video-Tutorial werden wir die Grundlagen des Plugins und warum es so toll ist.

---

Als schnelles Beispiel verweisen wir wieder auf das Beispiel der Twitter-Such-API von Freitag (denken Sie an Bieber). Der einzige Unterschied besteht darin, dass wir dieses Mal eine HTML-Vorlage verwenden, um die zurückgegebenen Daten anzuhängen, anstatt unser JavaScript durcheinander zu bringen!

Vor Monaten stellte Ihnen Andrew Burgess dieses Plugin vor, das sich noch in der Beta-Phase befindet. Heute integrieren wir das Plugin jedoch in echten Code.

Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!

---

Crash-Kurs

---

Schritt 1: Importieren Sie jQuery und das Templating Plugin

---

Schritt 2: Erstellen Sie Ihre Vorlage

• Beachten Sie, wie diese Vorlage eingebunden wird Skript Tags und das a Art von text / x-jquery-tmpl wurde angewendet.
• Wir referenzieren die Namen von Vorlagenvariablen, indem wir ein Dollarzeichen voranstellen und den Namen der Eigenschaft in geschweifte Klammern einschließen.
• Ob Anweisungen können mithilfe von zwei geschweiften Klammern erstellt werden, wie oben gezeigt. (Weitere Informationen finden Sie im Screencast.)

---

Schritt 3: Finden Sie einige Daten zum Rendern!

In diesem Fall führen wir eine schnelle Suche der Twitter-Such-API durch.

Vielen Dank an Peter Galiba (siehe Kommentare) für die Empfehlung des eleganteren $ .map Lösung, oben gezeigt.

In dem Screencast finden Sie einen vollständigen Überblick über den obigen Code. Am wichtigsten ist jedoch, dass wir ein Array von Objekten erstellen. Diese Daten dienen dann als Daten für die Vorlage, die wir in Schritt 2 erstellt haben. Beachten Sie, wie die Eigenschaft benannt wird:

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

… Entsprechen den Vorlagenvariablen, die wir in Schritt zwei erstellt haben.

---

Schritt 4: Wo soll der Aufschlag gerendert werden??

Als nächstes müssen wir bestimmen woher Markup und Daten sollten gerendert werden. Zu diesem Zweck erstellen wir eine ungeordnete Liste.

---

Schritt 5: Rendern Sie die Daten

Zum Schluss hängen wir die Daten an die Vorlage an und hängen sie an die ungeordnete Liste (#tweets) an, die wir in Schritt 4 erstellt haben.

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

1. Finden Sie das Skript (Vorlage) Element mit einem Ich würde von Tweets.
2. Hänge an Twitter Array zu dieser Vorlage.
3. Fügen Sie das neue Markup zum DOM hinzu.

---

Letzte Quelle

           
 Tweets über Nettuts+ 
  
   

---

Also was denkst du?

Jetzt, da das Templating-Plugin offiziell vom jQuery-Kernteam unterstützt wird, können Sie es in Ihren zukünftigen Projekten verwenden?