Огляд, початок роботи, розробка html шаблонів з mustache

Веб додатка використовують MVC архітектуру, щоб відокремити бізнес логіку від презентаційного вигляду. Складні проекти, з насиченою клієнтської стороною можуть бути трудомісткими в розробці. У багатьох сценаріях коду можна використовувати шаблонні системи для збільшення швидкості розробки і простоти зміни видів надалі.

Mustache.js

Mustache.js надає добре документовану шаблонну систему, яка може бути використана для управління HTML шаблонів. Так, як mustache підтримує велику кількість програмних мов, нам не треба використовувати кілька шаблонизатор на серверній стороні.

У цій статті ми розглянемо основи роботи і проектування HTML шаблонів з бібліотекою mustache.js

Навіщо потрібні шаблонні системи?

Трохи інший спосіб, створити DOM елементи засобами JS і вставити їх індивідуально, як показано нижче:

Обидва способи вище використовуються для динамічного створення HTML елементів на сторінці. Наприклад, нам треба використовувати красивий список в дизайні трьох різних сторінок. Використовуючи цю техніку, треба повторювати HTML код в трьох різних місцях. Це не дуже добре.

У багатьох сценаріях ми можемо використовувати заздалегідь підготовлені шаблони, уникаючи повторення коду.

Початок роботи з Mustache.js

Що ж, приступимо. Почнемо з простої структури:

Перш, підключаємо файл бібліотеки mustache.js на початку документа. Тепер можна працювати. У вигляді описані ім'я персони і її рід діяльності. Далі ми маємо шаблон всередині функції render () в якому міститься презентаційний HTML код з тегами імені і роду діяльності. Теги визначаються за допомогою подвійних фігурних дужок. Далі розглянемо як працює метод render ().

Обробка mustache шаблонів

Наступний код показує застосування функції render () всередині mustache.js файлу. У функцію можуть бути передані три параметра. Перші два, шаблон і вид, обов'язкові. Третій може застосовуватися для динамічних шаблонів вбудованих в головних шаблон. У нашому колишньому прикладі, ми передавали тільки перші два параметра.

Це найбільш простий і базовий спосіб побудови шаблонів з mustache. Погляньмо на інші варіанти написання коду.

Розробка HTML + Mustache шаблонів

Існує кілька способів вбудувати mustache шаблони в ваше веб додаток. Ці методи схожі з підключенням CSS стилів. Тобто, можна прописувати рядком коду, блоком, або підключати зовнішній файл. Приклад, який розглядали раніше, є строковим підключенням шаблону. Розглянемо, як можна використовувати шаблони як строкових скриптів.

Підключення шаблонів строковим методом

Ви можете вбудовувати безліч шаблонів з різними ID в тіло HTML документа. Коли буде потрібно його використовувати, досить викликати innerHTML, і передати в функцію render () як шаблон. Ось так:

Як видно, шаблони зберігаються окремо і використовуються динамічно, тільки коли це потрібно. Такий підхід збільшує можливості повторного використання шаблонів. Хоча, використання строкових скриптів обмежує видимість шаблонів в рамках однієї сторінки. Якщо у вас кілька сторінок, треба визначати шаблони знову. Тому, підключення шаблонів як зовнішніх файлів буде ідеальним рішенням - як у випадку з CSS.

Шаблони як зовнішні HTML сніпети

У цьому випадку, ми будемо використовувати jQuery для підключення шаблонів. jQuery надає функцію load (), яка дозволяє підключати зовнішні шматки коду документа. Load () функція не виконує скрипти, тому нам не треба укладати шаблон в тег