Share
Cu ceva timp in urma, v-am aratat cum sa folositi pluginul jQuery template intr-un sfat rapid; în acest sfat rapid, vă voi arăta cum să utilizați o altă bibliotecă de șabloane, Mustache, care este la fel de ușor de utilizat.
Puteți obține Mustache.js din pagina proiectului GitHub; dacă o veți folosi într-un proiect, îl puteți descărca sau git clone aceasta; Tocmai am făcut referire la fișierul brut pe GitHub pentru acest sfat rapid:
Acum îl puteți folosi pentru a face date!
Cel mai probabil, veți primi datele de pe server sub formă de JSON atunci când utilizați Mustache în producție. Cu toate acestea, este la fel de ușor să codificați un obiect literal și să îl utilizați, ceea ce vom face aici.
Accentsconagua
var data = nume: "Unele Tuturi + site-uri", site-uri: ["Nettuts +", "Psdtuts +", "Mobiletuts +"]; var url = text.trim () pentru aLowerCase () split ('tuts +') [0] + '.tutsplus.com'; întoarcere '' + text + ''; ; Acum suntem pregătiți să definim șablonul.
Șablonul dvs. este pur și simplu șir; puteți utiliza fie un șir regulat JavaScript obișnuit, fie puteți pune șablonul într-o etichetă de script și îl puteți obține prin intermediul unor elemente de tip jQuery html () (sau, bineînțeles, innerHTML). Aceasta este probabil o alegere mai bună dacă utilizați un șablon complicat, deoarece puteți utiliza rupturi de linie. Nu uitați să dați scriptului un tip de altceva decât "text / javascript"; în caz contrar, browserele pot încerca să o interpreteze, ceea ce va duce la erori.
Șablonul dvs. va fi în principal HTML; când doriți să utilizați o valoare din datele dvs., trimiteți numele cheii valorii în date. Pentru a utiliza Nume valoare în datele de mai sus, ați face referire în felul următor:
Nume
Blocurile reprezintă o piesă importantă de Mustache: le puteți folosi pentru a intra în interiorul unor obiecte și obiecte, precum și pentru lambda (funcții). Este destul de simplu să faci blocuri: trebuie doar să folosești o etichetă de deschidere și de închidere: deschiderea începe cu un kilogram (#) și cel de închidere cu o bară (/).
Când iterați peste matrice, operatorul implicit "." Vă va aduce valoarea. Dacă site-uri a fost un obiect, ai folosi cheile din interiorul blocului.
Folosirea funcțiilor este ceva mai dificilă. Pentru partea de date, Mustache.js necesită o funcție care se întoarce funcția care trebuie utilizată. Funcția respectivă primește textul care trebuie redat (tot textul din tag-urile funcțiilor de mustă) și o funcție care va face etichetele șablonului în interiorul textului. Apoi, indiferent ce functie revine, va fi pusa in etichete. Puteți vedea acest lucru la locul de muncă în url-uri în datele de mai sus.
Este foarte simplu să redați codul HTML:
html = Mustache.to_html (șablon, date);
Apoi, puteți păstra acel cod HTML oriunde doriți.
date var, șablon, html; date = nume: "Unele Tuts + Site-uri", site-uri: ["Nettuts +", "Psdtuts +", "Mobiletuts +"]; var url = text.trim () pentru aLowerCase () split ('tuts +') [0] + '.tutsplus.com'; întoarcere '' + text + ''; ; template = " Nume
Pentru a afla mai multe despre Mustache, vizitați site-ul Web. Distrează-te cu asta!
