aplicatii web folosesc arhitectura MVC pentru a separa logica de afaceri din prezentarea formularului. Proiecte complexe, cu partea de client bogat poate fi consumatoare de timp pentru a se dezvolta. În multe scenarii, codul poate utiliza sistemul de șablon pentru a crește viteza de dezvoltare și ușurința de schimbare specii în viitor.
Mustache.js
Mustache.js oferă un sistem de șablon bine documentat, care pot fi folosite pentru a gestiona șabloanele HTML. Ca mustață acceptă o varietate de limbaje de programare, nu avem nevoie de a utiliza mai multe sisteme șablon pe partea de server.
In acest articol vom discuta despre elementele de bază ale HTML și biblioteca șabloane de design mustache.js
De ce avem nevoie de un sistem de șablon?
Un mod ușor diferit de a crea elemente DOM JS și inserați mijloacele lor individuale, după cum se arată mai jos:
Ambele metode de mai sus sunt folosite pentru crearea dinamică a elementelor HTML pe o pagină. De exemplu, trebuie să folosim lista într-un design frumos de trei pagini diferite. Folosind aceste tehnici, este necesar să se repete codul HTML în trei locuri diferite. Acest lucru nu este foarte bun.
În multe scenarii, putem folosi șabloane predefinite, evitând repetarea codului.
Noțiuni de bază cu Mustache.js
Ei bine, pentru a primi în jos. Să începem cu o structură simplă:
În primul rând, conectați fișier mustache.js bibliotecă la începutul documentului. Acum puteți lucra. Formularul descrie numele persoanei și ocupația acesteia. În continuare avem un șablon în funcție de render (), care conține cod HTML prezentaționale este etichetat cu numele și tipul de activitate. Tag-uri sunt definite folosind arce duble curbate. În continuare, ia în considerare modul de a face () lucrări metoda.
template-uri de procesare mustață
Codul de mai jos prezintă aplicația face) funcția în interiorul fișierului mustache.js (. Cei trei parametri pot fi transmise funcția. Primele două, modelul și forma sunt obligatorii. Al treilea poate fi utilizat pentru șabloanele dinamice încorporate în șablonul principal. În exemplul anterior, am trecut doar primii doi parametri.
Aceasta este cea mai simplă și cea mai importantă modalitate de a construi șabloane cu mustață. Să ne uităm la alte opțiuni pentru a scrie cod.
Dezvoltarea de HTML + template-uri mustață
Există mai multe moduri de a construi șabloane mustața în aplicația Web. Aceste metode sunt similare cu conexiunea de stiluri CSS. Asta este, este posibil să se prescrie o linie de cod, unitate, sau conectați la un fișier extern. Exemplul care a fost tratat anterior, un model șir de conectare. Luați în considerare modul în care puteți utiliza template-uri ca script-ul inline.
Conectarea Metoda șir șablon
Puteți încorpora o varietate de template-uri cu ID diferit în corpul unui document HTML. Când doriți să-l utilizați, pur și simplu apelați innerHTML, și se transferă la funcția render () ca un șablon. Iată cum:
După cum puteți vedea, șabloanele sunt stocate separat și folosite în mod dinamic numai atunci când este necesar. Această abordare crește șansele de modele de reutilizare. Deși, utilizarea de script-uri inline limitează vizibilitatea template-uri în aceeași pagină. Dacă aveți mai multe pagini, este necesar să se definească șabloane din nou. Prin urmare, modelele de conectare ca și fișierele externe pentru a fi soluția perfectă - cum este cazul cu CSS.
Template-uri ca fragmente de cod HTML externe
În acest caz, vom folosi jQuery pentru a conecta modele. jQuery oferă o funcție de încărcare (), care vă permite să conectați bucăți de cod externe de hârtie. Load () funcția nu execută script-uri, pentru că nu avem nevoie pentru a intra într-un șablon în tag-ul