Áttekintés, első lépések, a fejlesztés html sablonok egy bajusz

Web alkalmazások MVC architektúra külön az üzleti logikát a bemutatása a formában. Komplex projektek, gazdag kliens oldalon lehet időigényes, hogy dolgozzon. Sok forgatókönyvet, a kód használható a template rendszer növeli a sebességet a fejlődés és a könnyű fajok változás a jövőben.

Mustache.js

Áttekintés, első lépések, a fejlesztés html sablonok egy bajusz

Mustache.js egy jól dokumentált template rendszer, amely lehet használni, hogy kezelje a HTML sablonokat. Mint bajusz támogatja a különböző programozási nyelvek, akkor nem kell, hogy több sablont rendszerek a szerver oldalon.

Ebben a cikkben fogjuk megvitatni a HTML alapjait és sablonok mustache.js könyvtár

Miért van szükség egy template rendszer?

Egy kissé eltérő módon, hogy hozzon létre DOM elemeket JS, és helyezze az egyéni eszközök, az alábbiak szerint:

Mindkét fenti módszerek használatosak a dinamikus létrehozása HTML elemek az oldalon. Például, meg kell használni a listát egy szép design három különböző oldalakon. Ezen módszerek alkalmazásával meg kell ismételni a HTML kódot három különböző helyen. Ez nem túl jó.

Sok forgatókönyvet, fel tudjuk használni előre definiált sablonok, ismétlések elkerülése kódot.

Az első lépések a Mustache.js

Nos, feküdj. Kezdjük egy egyszerű szerkezet:

Először csatlakoztassa mustache.js könyvtárfájlt elején a dokumentumot. Most már működik. Az űrlap leírja a személy nevét és foglalkozását. Következő van egy sablont render () függvény, amely prezentációs HTML kódot címkézve a nevét és a tevékenység típusát. Címkék használatával határozzák dupla ívelt íveket. Ezután úgy hogyan render () metódus működik.

Feldolgozás bajusz sablonok

A következő kód mutatja az alkalmazás render () függvény belsejében mustache.js fájlt. A három paraméter lehet továbbítani funkciót. Az első két, a minta és a forma kötelező. A harmadik lehet használni a dinamikus sablonok ágyazva a fő sablon. A korábbi példához, elhaladtunk csak az első két paraméter.

Ez a legegyszerűbb és legalapvetőbb módja építésére sablonok bajusz. Nézzük más lehetőség, hogy írjon kódot.

Fejlesztése HTML + bajusz sablonok

Számos módja van, hogy építsenek bajusz sablont a webes alkalmazás. Ezek a módszerek hasonlóak a kapcsolatot a CSS stílusokat. Ez azt jelenti, lehet felírni kódsort, egység, vagy csatlakozni egy külső fájlba. A példa, hogy már korábban kezelték, egy összekötő húr mintát. Fontolja meg, hogyan használhatja a sablonokat inline forgatókönyvet.

Csatlakozó karaktersablon eljárás

Beágyazhat különböző sablonok különböző ID-t a szervezetben egy HTML dokumentum. Ha szeretné használni, egyszerűen hívja a innerHTML, és tegyük a render () függvény, mint a sablon. Íme:

Mint látható, a sablonok elkülönítve tárolják és használják dinamikusan csak szükség esetén. Ez a megközelítés növeli az esélyét az újrafelhasználás mintákat. Bár a használata inline szkriptek korlátozza a láthatóságát a sablonokat az azonos oldalon. Ha több oldalt, akkor meg kell határozni a sablonok újra. Ezért a csatlakozó mintázatok, mint a külső fájlt, hogy a tökéletes megoldás - mint ahogy az a CSS.

Sablonok külső HTML utasítások

Ebben az esetben fogjuk használni jQuery csatlakozni mintákat. jQuery biztosít load () függvény, amely lehetővé teszi, hogy csatlakoztassa a külső kód papírdarabot. Load () függvény végrehajtása nem scriptek, mert nem kell kötnie egy sablont a tag