Sfat rapid o introducere în templatizarea jQuery

JavaScript Templating este o idee curată: vă permite să convertiți cu ușurință JSON în HTML fără a fi nevoie să o parsezi. La conferința Microsoft MIX10, ei au anunțat că încep să contribuie la echipa jQuery. Unul dintre eforturile lor este de a oferi un plugin templating. În acest sfat rapid, vă voi arăta cum să îl utilizați!

Abonați-vă la pagina noastră YouTube pentru a viziona toate tutorialele video!

Veți avea nevoie de date pentru șablon; probabil veți prelua JSON de pe serverul dvs.; desigur, literali de tip Object / Array funcționează la fel de bine, de aceea folosim:

 var data = nume: "John", varsta: 25, name: "Jane", varsta: 49, name: "Jim", varsta: 31 , nume: "Joe", vârsta: 19, name: "Jack", vârsta: 48];

Șablonul este scris în Etichete; pentru fiecare element din JSON, șablonul va afișa codul HTML; atunci, va returna întregul fragment HTML. Putem ajunge la valorile JavaScript din cadrul șablonului utilizând % și% ca etichete. De asemenea, putem executa JavaScript obișnuit în cadrul acestor etichete. Iată șablonul nostru:

 
 % = $ i + 1% 
Nume:  % = nume%
 % dacă ($ context.options.showAge) % 
Vârstă:  % = vârsta%
 %% 

Pentru a face datele cu șablonul, apelați pluginul; transmiteți datele la metoda pluginului; puteți trece opțional și la un obiect de opțiuni. (Acestea nu sunt opțiuni predefinite, ci valori pe care doriți să le utilizați în cadrul șablonului, probabil pentru ramificare).

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

Este atât de ușor! Distrează-te! Puteți obține codul complet pentru acest sfat rapid pe Github