NodeREDGuidUKR

ДОВІДНИК З NODE-RED українською мовою

На головну Розділ
   

Шаблони Mustache

Ця стаття стосується не тільки Node-RED, і написана без урахування специфіки та термінології, що використовується в Node-RED. При написанні розділу була використана документація по Mustache та ChatGpt.

Про Mustache

Mustache - це шаблонний рушій, який дозволяє розділити статичний текст та дані веб-сторінки або будь-якого іншого тексту на окремі частини. Він був розроблений як мово-нейтральний інструмент, який може використовуватись з будь-якою мовою програмування. Шаблони Mustache базуються на принципах “розділення на рівні” та “відсутність логіки в шаблонах”. Вони використовуються для генерації HTML-коду або іншого тексту на основі даних, які передаються в шаблон.

Основна ідея Mustache полягає в тому, що весь текст розділений на дві частини: дані та шаблон. Дані передаються в шаблон у вигляді об’єкта даних, який містить ключі та значення, а шаблон містить текст, наприклад HTML-код з підставними полями, які відображають значення ключів з об’єкта даних.

Mustache може бути використаний для генерації HTML-коду для веб-сторінок, електронної пошти, PDF-файлів та інших документів. Його можна використовувати в поєднанні з різними мовами програмування, такими як JavaScript, Python, Ruby, PHP та інші.

Опис

Отже, Mustache - це шаблонізатор, який використовує заповнювачі даних для заповнення даних в шаблоні. Тобто є шаблон (template) у Mustache, це рядок, який містить текст та заповнювачі для даних, які звуться тегами (tags). Тобто в шаблоні є певні місця, які відділені від тексту шаблону за допомогою спеціального синтаксису - подвійних фігурних дужок `` (звідси mustaches - вуса). У функцію, що використовує шаблонізатор Mustache, для генерування тексту буде передаватися як шаблон так і хеш - об’єкт, з якого будуть вибиратися необхідні дані для вставлення в теги. У процесі перетворення з хеша будуть вибиратися дані та формувати контекст. Правила перетворення та вставлення цих даних в місцях заповнення означується в тегах. Mustache дозволяє використовувати різні типи тегів, такі як змінні, списки та умовні вирази.

Основні типи тегів Mustache це (деталі нижче):

  1. - заповнювач даних, який використовується для вставки значення з контексту у шаблон. Наприклад, вставить значення поля name з контексту у шаблон.
  2. ... - секція заповнювача даних, яка використовується для умовного відображення тексту у шаблоні в залежності від наявності або відсутності значення у контексті. Наприклад, ... відображатиме текст між собою тільки у випадку, якщо в контексті є значення is_logged_in, що дорівнює true.
  3. ... - секція заповнювача даних, яка використовується для умовного відображення тексту у шаблоні в залежності від відсутності значення у контексті. Наприклад, ... відображатиме текст між собою тільки у випадку, якщо в контексті немає значення is_logged_in або його значення дорівнює false.
  4. `` - заповнювач даних, який використовується для вставки поточного елементу з контексту у шаблон. Цей заповнювач використовується зазвичай для відображення списків.
  5. `` - частковий заповнювач даних, який використовується для включення іншого шаблону в поточний шаблон.

У Mustache не використовуються логічні вирази типу if-else чи циклів for.

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

Приклад шаблону Mustache:

Hello 
You have just won  dollars!

Well,  dollars, after taxes.

Якщо хеш при цьому буде таким:

{
  "name": "Chris",
  "value": 10000,
  "taxed_value": 10000 - (10000 * 0.4),
  "in_ca": true
}

то результат буде наступним:

Hello Chris
You have just won 10000 dollars!
Well, 6000.0 dollars, after taxes.

Типи тегів

Як вже зазначалося, теги позначені подвійними фігурними дужками. Наприклад `` - це тег, як і ` . В обох прикладах ми би називали person` як ключ (key) або ключ тегу (key tag). Поговоримо про різні типи тегів.

Variables (змінні)

Найбільш загальний тип тегу - це змінна (variable). Тег `` у базовому шаблоні спробує знайти ключ name у поточному контексті. Якщо немає ключа name, перевірятимуться рекурсивно батьківські контексти. Якщо буде досягнуто верхнього контексту, а ключ name все ще не знайдений, нічого не буде виведено.

В усіх змінних за замовчуванням HTML є екранованим. Якщо ви хочете повернути неекранований HTML, скористайтеся “потрійними вусами”:}. Ви також можете використовувати & для неекранування змінної: ``. Це може бути корисно при зміні роздільників (див. “Set Delimiter” нижче). За замовчуванням погана змінна повертає порожній рядок, але зазвичай це можна налаштувати у бібліотеці Mustache.

Розглянемо приклад. Шаблон:

* 
* 
* 
* }

Якщо передається хеш:

{
  "name": "Chris",
  "company": "<b>GitHub</b>"
}

То функція перетворення поверне:

* Chris
*
* &lt;b&gt;GitHub&lt;/b&gt;
* <b>GitHub</b>

У першому рядку повернулося значення ключа name, у другому - пустий рядок, бо ключ age відсутній в контексті, у третьому ключові символи тегу HTML <, > екранувалися.

Sections (секції)

Секції означують логіку поведінки тексту між тегами секції. Секція починається з тегу початку ( містить) і закінчується тегом закінчення (містить). Наприклад, починає секцію "person", тоді як закінчує її.

Зміст секції (текст в середині) може відображатися один або кілька разів, залежно від значення ключа в поточному контексті. Нижче розглянемо кілька варіантів.

Умовне відображення

Якщо ключ, що вказаний в тезі блоку, існує і має значення false або порожнього списку, текст в боці не відображатиметься. Наприклад при шаблоні з person:

Shown.

  Never shown!

і хеші:

{
  "person": false
}

показуватиме:

Shown.

Коли значення є відмінним від false, але не є списком, воно буде використовуватися як контекст для одного виконання блоку. Наприклад шаблон:


  Hi !

При хеші:

{
  "person": { "name": "Jon" }
}

видасть:

Hi Jon!

Таким чином задається логіка умовного показу змісту блоку.

Списки

Якщо ключ person що вказаний в тезі блоку, існує і має ненульове значення, текст в межах блоку відображатиметься один або кілька разів. Коли значення є непорожнім списком (масивом), то текст у блоці буде відображатися один раз для кожного елемента у списку. Для кожної ітерації контекст всередині блоку буде встановлений поточному елементу ітерації. Таким чином ми можемо перебирати колекції (масиви). Наприклад, при шаблоні:


  <b></b>

Та значенні хешу:

{
  "repo": [
    { "name": "resque" },
    { "name": "hub" },
    { "name": "rip" }
  ]
}

Виведення буде наступним:

<b>resque</b>
<b>hub</b>
<b>rip</b>

Оскільки тег repo є не порожнім списком, то в секції буде виведено значення кожного name обрамленого з обох боків тегом <b>.

Функції

Коли значенням тез блоку є об’єкт, що викликається, наприклад функція або лямбда, об’єкт буде викликаний та переданий туди блок тексту. Текст, що передається (text), є оригінальним літеральним блоком, без рендерингу. `` не буде розширено - лямбда повинна робити це самостійно. Таким чином ви можете реалізувати фільтри або кешування.

Наприклад, є шаблон:


   is awesome.

Передається хеш:

{
  "name": "Willy",
  "wrapped": function() {
    return function(text, render) {
      return "<b>" + render(text) + "</b>"
    }
  }
}

Поверне:

<b>Willy is awesome.</b>

Інвертовані секції

Інвертована секція поичнається з ^ і закінчується /. Тобто починає інвертовану секцію "person", тоді як закінчує її. Звичайні секції можуть бути використані для виконання тексту один чи більше разів на основі значення ключа, тоді як інвертовані секції можуть відображати текст один раз на основі інвертованого значення ключа. Тобто вони будуть виконані, якщо ключ FALSE, помилковий або є порожнім списком.

Наприклад при шаблоні:


  <b></b>


  No repos :(

Та хеші :

{
  "repo": []
}

Отриаємо:

No repos :(

Коментарі

Коментарі починаються з ! і ігноруються. Наступний шаблон:

<h1>Today.</h1>

дасть

<h1>Today.</h1>

Коментарі можуть містити нові рядки.

Partials (фрагментарні шаблони)

Partials (фрагментарні шаблони) - це шаблони, які можуть бути включені в інші шаблони. Їх використовують, коли маєте декілька різних шаблонів, які мають спільні елементи, такі як хедери, футери або меню. Partials дозволяють створити окремі шаблони для цих спільних елементів і підключати їх до головного шаблону. Це допомагає зменшити повторення коду і полегшити редагування.

Partials починаються зі знака більше, наприклад ``.

Partials виконуються під час виконання (на відміну від часу компіляції), тому можливі рекурсивні Partials. Але при цьому уникайте нескінченних петель. Вони також успадковують контекст виклику. В той час як у файлі ERB у вас може бути таке:

<%= partial :next_more, :start => start, :size => size %>

Mustache потребує таке:

Чому? Тому що файл next_more.mustache успадкує методи ` size та start` з контексту виклику.

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

Наприклад, цей шаблон Partials:

base.mustache:
<h2>Names</h2>

  


user.mustache:
<strong></strong>

Можна розглядати як єдиний розширений шаблон:

<h2>Names</h2>

  <strong></strong>

Заміна роздільників тегів

Теги Set Delimiter починаються зі знаку = та змінюють роздільники тегів із `` на власні рядки. Розглянемо наступний надуманий приклад:

* 

* <% erb_style_tags %>
<%==%>
*

Тут ми маємо список з трьома пунктами. Перший елемент використовує стиль тегу за замовчуванням, другий використовує стиль erb, визначений тегом Set Delimiter, а третій повертається до стилю за замовчуванням після ще одного обявлення Set Delimiter.

Згідно з ctemplates, це “корисно для таких мов, як TeX, де в тексті можуть виникати подвійні дужки та є незручними для використання розмітки. “

Спеціальні роздільники не можуть містити пробіл або знак рівності.