Schneller Tipp Eine Einführung in jQuery Templating

JavaScript Templating ist eine nette Idee: Sie können JSON ganz einfach in HTML konvertieren, ohne es analysieren zu müssen. Auf der MIX10-Konferenz von Microsoft gaben sie bekannt, dass sie anfangen, zum jQuery-Team beizutragen. Eine ihrer Bemühungen ist es, ein Template-Plugin zur Verfügung zu stellen. In diesem kurzen Tipp zeige ich Ihnen, wie Sie damit umgehen!

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

Sie benötigen die Daten als Vorlage. Sie rufen JSON wahrscheinlich von Ihrem Server ab. Natürlich funktionieren Object / Array-Literale genauso gut, also verwenden wir sie:

 var data = [Name: "John", Alter: 25, Name: "Jane", Alter: 49, Name: "Jim", Alter: 31, Name: "Julie", Alter: 39 , Name: "Joe", Alter: 19, Name: "Jack", Alter: 48];

Die Vorlage ist geschrieben Stichworte; Für jedes Element in Ihrem JSON wird die HTML-Datei von der Vorlage dargestellt. Dann wird das gesamte HTML-Fragment an Sie zurückgegeben. Zu den JavaScript-Werten innerhalb der Vorlage können Sie mit % und% als Tags gelangen. Wir können in diesen Tags auch reguläres JavaScript ausführen. Hier ist unsere Vorlage:

 
 % = $ i + 1% 
Name:  % = name%
 % if ($ context.options.showAge) % 
Alter:  % = age%
 %% 

Um die Daten mit der Vorlage zu rendern, rufen Sie das Plugin auf. Übergeben Sie die Daten an die Plugin-Methode. Optional können Sie auch ein Optionsobjekt übergeben. (Dies sind keine vordefinierten Optionen; dies sind Werte, die Sie in der Vorlage verwenden möchten, möglicherweise zum Verzweigen.)

 $ ("# listTemplate"). render (data, showAge: true). appendTo ("ul");

So einfach ist das! Viel Spass damit! Den vollständigen Code für diesen schnellen Tipp erhalten Sie auf Github