Á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
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