У цьому розділі ми розглянемо шаблонізаціі - зручний спосіб генерації HTML по «шаблоном» і даними.
Але в складних інтерфейси розмітка спочатку відсутня на сторінці. Компоненти генерують свій DOM самі, динамічно, на основі даних, отриманих з сервера або з інших джерел.
Раніше ми вже бачили код Menu. який сам створює свій елемент:
Чи зрозумілий цей код? Очевидно чи, який HTML генерують методи render. renderItems?
З першого погляду - навряд чи. Потрібно як мінімум уважно подивитися і продумати код, щоб розібратися, яка саме DOM-структура створюється.
... А що, якщо потрібно змінити створюваний HTML? ... А що, якщо це завдання дісталася не програмісту, який написав цей код, а верстальщику, який з HTML / CSS проекту знаком відмінно, але цей JS-код бачить вперше? Імовірність помилок при цьому зашкалює за всі розумні межі.
На щастя, генерацію HTML можна спростити. Для цього скористаємося бібліотекою шаблонізаціі.
Шаблон - це рядок в спеціальному форматі, яка шляхом підстановки значень (текст повідомлення, ціна і т.п.) і виконання вбудованих фрагментів коду перетворюється в DOM / HTML.
Приклад шаблону для меню:
Як видно, це звичайний HTML, з вставками виду <%. %> .
Для роботи з таким шаблоном використовується спеціальна функція _.template. яка надається фреймворком LoDash. її синтаксис ми детально подивимося далі.
Приклад використання _.template для генерації HTML з шаблоном вище:
Цей код набагато простіше, ніж JS-код, чи не так? Шаблон дуже наочно показує, що в результаті повинно вийти. На відміну від коду, в шаблоні первинний текст, а вставок коду зазвичай мало.
Давайте докладніше познайомимося з _.template і синтаксисом шаблонів.
Holy war detected!
Способів шаблонізаціі і, особливо, синтаксисів шаблонів, приблизно стільки ж, скільки способів зловити лева в пустелі. Інакше кажучи ... багато.
Ця глава - абсолютно не місце для священних воєн на цю тему.
Шаблон являє собою рядок зі спеціальними роздільниками, яких всього три:
<% code %> - код
Код між роздільниками <%. %> буде виконаний «як є»
<%= expr %> - для вставки expr як HTML
Мінлива чи вираз всередині <%=. %> буде вставлено «як є». наприклад: <%=title %> вставить значення змінної title. а <%=2+2%> вставить 4.
<%- expr %> - для вставки expr як тексту
Мінлива чи вираз всередині <%-. %> буде вставлено «як текст», тобто з заміною символів <> " 'На відповідні HTML-entities.
Наприклад, якщо expr містить текст
. то при <%-expr%> в результат потрапить, на відміну від <%=expr%>. НЕ HTML-тег
. а текст lt; brgt; .
Для роботи з шаблоном в бібліотеці LoDash є функція _.template (tmpl, data, options).
tmpl Шаблон. options Необов'язкові настройки, наприклад можна поміняти роздільники.
Ця функція запускає «компіляцію» шаблону tmpl і повертає результат у вигляді функції, яку далі можна запустити з даними і отримати рядок-результат.
Вона є результатом виклику new Function ( "obj", "код"). де код динамічним чином генерується на основі шаблону:
- Спочатку в коді йде «шапка» - стандартний початок функції, в якому оголошується змінна __p. У неї буде записуватися результат.
- Потім додається блок with (obj). всередині якого в __p додаються фрагменти HTML з шаблону, а також змінні з виразів <%=. %>. код з <%. %> копіюється в функцію «як є».
- Потім функція завершується, і return __p повертає результат.
При виклику цієї функції, наприклад compiled (). вона отримує об'єкт даних як obj. тут це. і якщо всередині with (obj) звернутися до title. то за правилами конструкції with це властивість буде отримано з об'єкта.
Можна і без with
Конструкція with є застарілою, але в даному випадку вона корисна.
Так як функція створюється через new Function ( "obj", "код") то:
- Вона працює в глобальному контексті, не має доступу до зовнішніх локальних змінних.
- Зовнішній use strict на таку функцію не впливає, тобто навіть в строгому режимі шаблон продовжить працювати.
Якщо ми все ж не хочемо використовувати with - потрібно поставити другий параметр - options. вказавши параметр variable (назва змінної з даними).