Snabbtips En introduktion till jQuery Templating

JavaScript Templating är en snygg idé: det låter dig enkelt konvertera JSON till HTML utan att behöva analysera det. På Microsofts MIX10-konferens meddelade de att de börjar bidra till jQuery-teamet. En av deras ansträngningar är att tillhandahålla ett templerande plugin. I det här snabba tipset visar jag dig hur du använder den!

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

Du behöver data till mall; du kommer sannolikt att hämta JSON från din server; Naturligtvis fungerar Objekt / Array-bokstäver lika bra, så det är vad vi använder:

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

Mallen är skriven in taggar; för varje objekt i din JSON kommer mallen att göra HTML; då kommer det att returnera hela HTML-fragmentet till dig. Vi kan komma till JavaScript-värdena från mallen genom att använda % and% som taggar. Vi kan också utföra regelbunden JavaScript inom dessa taggar. Här är vår mall:

 
 % = $ i + 1% 
Namn:  % = namn%
 % om ($ context.options.showAge) % 
Ålder:  % = ålder%
 %% 

För att göra data med mallen, ring pluggen; skicka data till plugin-metoden; du kan valfritt passera i ett alternativ objekt också. (Det här är inte fördefinierade alternativ, de är värden du vill använda i mallen, kanske för förgrening.)

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

Det är så enkelt! Ha kul med det! Du kan få fullständig kod för detta snabba tips på Github