În acest capitol vom examina șabloanele - o modalitate convenabilă de a genera HTML dintr-un "șablon" și de date.
Dar în interfețe complexe, inițial lipsește pe pagină o marcare. Componentele își generează propriile DOM-uri, în mod dinamic, pe baza datelor primite de la server sau din alte surse.
Am văzut deja codul de meniu. care însăși creează un element propriu:
Este acest cod de înțeles? Evident, ce HTML generează metodele de randare. renderItems?
La prima vedere - puțin probabil. Este necesar cel puțin să arătați cu grijă și să gândiți prin cod pentru a înțelege structura DOM creată.
... Și dacă am nevoie să schimb HTML-ul pe care-l creez? ... Și dacă această sarcină nu ar fi fost adresată programatorului care a scris acest cod, ci coderului, care este familiarizat cu proiectul HTML / CSS, dar acest cod JS se vede pentru prima dată? Probabilitatea de eroare în acest caz depășește toate limitele rezonabile.
Din fericire, generarea HTML poate fi simplificată. Pentru aceasta, utilizați biblioteca de șabloane.
Un șablon este un șir într-un format special, care este convertit în DOM / HTML inserând valori (text mesaj, preț etc.) și executând fragmente de cod încorporate.
Exemplu de șablon pentru meniu:
După cum puteți vedea, acesta este un HTML normal, cu inserții ale formularului <%. %> .
Pentru a lucra cu acest șablon, utilizați funcția specială _.template. care este furnizat de cadrul LoDash. sintaxa noastră vom arăta în detaliu mai târziu.
Exemplu de utilizare a _.template pentru a genera HTML cu șablonul de mai sus:
Acest cod este mult mai simplu decât codul JS, nu-i așa? Șablonul arată foarte clar care ar trebui să fie rezultatul. Spre deosebire de cod, șablonul este bazat pe text, iar inserțiile de coduri sunt de obicei mici.
Să examinăm mai îndeaproape șabloanele _.template și sintaxa.
Sfântul război a fost detectat!
Metode de șablon și, în special, de șabloane de sintaxă, cam la fel ca și cum să prindeți un leu în deșert. Cu alte cuvinte ... mult.
Acest capitol nu este absolut locul pentru războaiele sfinte pe acest subiect.
Un șablon este un șir cu delimitatori specifici, dintre care există numai trei:
<% code %> - cod
Codul dintre delimitatori <%. %> va fi executat "așa cum este"
<%= expr %> - pentru a insera expr ca HTML
Variabila sau expresie în interiorul <%=. %> va fi inserat "ca atare". De exemplu: <%=title %> introduce valoarea variabilei titlu. și <%=2+2%> inserați 4.
<%- expr %> - pentru a insera expr ca text
Variabila sau expresie în interiorul <%-. %> va fi inserat ca "text", adică înlocuirea caracterelor <> "la entitățile HTML corespunzătoare.
De exemplu, dacă expr conține text
. apoi cu <%-expr%> în rezultatul va cădea, spre deosebire de <%=expr%>. nici o etichetă HTML
. și textul lt; brgt; .
Pentru a lucra cu șablonul din biblioteca LoDash, există o funcție numită _.template (tmpl, date, opțiuni).
tmpl Template. Opțiuni Setări opționale, de exemplu, puteți schimba separatoarele.
Această funcție pornește "compilația" șablonului tmpl și returnează rezultatul ca o funcție, care poate fi rulată cu datele și se obține șirul de rezultate.
Este rezultatul chemării noii funcții ("obj", "code"). unde codul este generat dinamic pe baza șablonului:
- În primul rând, codul este un "cap" - începutul standard al funcției, în care este declarată variabila __p. Acesta va înregistra rezultatul.
- Apoi se adaugă blocul (obj). în interiorul căruia în __p fragmente HTML dintr-un șablon sunt adăugate, precum și variabile din expresii <%=. %>. Cod de la <%. %> este copiat la funcția "așa cum este".
- Funcția se termină apoi și returnează __p returnează rezultatul.
Când apelați această funcție, de exemplu compilați (). devine obiectul de date ca obj. aici este. și dacă în interiorul cu (obj) se referă la titlu. atunci regulile de construcție cu această proprietate vor fi obținute din obiect.
Este posibil și fără
Construcția este depășită, dar în acest caz este utilă.
Deoarece funcția este creată prin noua funcție ("obj", "code"), atunci:
- Funcționează într-un domeniu global, nu are acces la variabile locale externe.
- Utilizarea strictă a utilizării externe nu afectează această funcție, adică, chiar și în modul strict, șablonul va continua să funcționeze.
Dacă încă nu vrem să folosim - trebuie să punem al doilea parametru - opțiuni. specificând variabila (numele variabilei de date).