Использование if/else в mustache.js: правильный подход
Быстрый ответ
В Mustache.js можно управлять условиями при помощи {{#ключ}}...{{/ключ}} при истинных значениях и {{^ключ}}...{{/ключ}} при ложных. Конечно, здесь нет прямого аналога if/else, однако этот подход эффективно позволяет проверять условия.
{
"loggedIn": true,
"user": "Алиса"
}
{{#loggedIn}}
Привет, {{user}}!
{{/loggedIn}}
{{^loggedIn}}
Пожалуйста, войдите в систему.
{{/loggedIn}}
В данном примере "Привет, Алиса!" появится на экране, если loggedIn
истинно. Если же loggedIn
ложно или не определено, приложение попросит войти в систему.
Установление значений по умолчанию в модели
Mustache рекомендует максимальную простоту шаблонов без введения в них логики. Все необходимые предварительные операции с данными должны производиться в модели или контроллере. Это касается также установления значений по умолчанию:
const viewModel = {
user: data.user || 'Гость', // Присваиваем 'Гость', если информация о пользователе отсутствует
loggedIn: Boolean(data.user) // Явное преобразование в булев тип; значение либо true, либо false
};
Mustache теперь использует булеву переменную loggedIn
, чтобы решить, какую часть шаблона отобразить.
Простое решение для сложных состояний
Шаблоны Mustache не содержат в себе логику, однако это не значит, что они не способны работать со сложными условиями. С помощью вложенных секций и значений по умолчанию все становится возможным:
{
"weather": "дождь",
"umbrella": true
}
{{#weather}}
{{#umbrella}}
Смотрите на меня, я готов к ливню! ☔️
{{/umbrella}}
{{^umbrella}}
Надеюсь, вы любите танцевать под дождём! 💃🌧️
{{/umbrella}}
{{/weather}}
Такие вложенные секции могут функционировать как вложенные if/else условия. Элегантное решение, не правда ли?
Использование глобальных настроек
Объект глобальных настроек с параметрами по умолчанию облегчает работу с шаблонами, в которых могут отсутствовать некоторые свойства:
const settings = {
defaultImageUrl: "path/to/default/image.jpg",
// другие общие параметры...
};
{{#image}}
<img src="{{.}}" alt="Превосходное изображение пользователя">
{{/image}}
{{^image}}
<img src="{{defaultImageUrl}}" alt="Картинка по умолчанию">
{{/image}}
Символ .
означает текущее значение свойства image
(если оно существует), а в противном случае используется defaultImageUrl
из глобальных настроек.
Когда возможностей Mustache недостаточно, есть альтернативы
Если вам не хватает гибкости, которую предлагает Mustache.js, рассмотрите Moxy-Stencil. Этот инструмент поддерживает хэлперы с аргументами, которые расширяют возможности условной логики:
// Пример использования хэлперов с аргументами Moxy-Stencil
<% if loggedIn && hasMessages %>
Ваш тайный курьер уже прибыл. 🕵️♀️
<% else %>
Сегодня новостей нет, друг. 🤠
<% endif %>
Хэлперы на стороне представления позволяют непосредственно в шаблонах реализовать логику, когда это действительно нужно.
Визуализация
В качестве примера давайте представим лампу (💡), которую нам нужно включить или выключить в зависимости от условий:
{{#isBulbOn}}
- Состояние лампы: 💡 (включена)
{{/isBulbOn}}
{{^isBulbOn}}
- Состояние лампы: 🌑 (выключена)
{{/isBulbOn}}
{{#isBulbOn}}
активируется, если лампа включена, и {{^isBulbOn}}
– когда она выключена. В зависимости от состояния, шаблон отобразит соответствующее сообщение.
Сначала составьте необходимые данные контекста в вашем JavaScript-коде перед использованием их в шаблоне:
// JavaScript контекст:
{
"isBulbOn": true // или false
}
Так ваш шаблон корректно отразит состояние лампы. Все мы здесь не маги, мы только создаем умные решения! 🎩
Обслуживание проще с Mustache
Шаблоны, не содержащие встроенной логики, значительно облегчают поддержку и помогают минимизировать возможные проблемы в будущем. Вот несколько советов относительно Mustache о том, как держать ваши шаблоны простыми и понятными:
- Укомплектовывайте свойства модели данными, избегая непосредственного внесения логики в шаблон.
- Пользуйтесь хэлперами или вставками (partials), если одна и та же логика постоянно повторяется, чтобы избежать дублирования кода.
- Старайтесь всегда проверять и очищать данные модели, чтобы избежать неожиданных ситуаций в процессе исполнения кода.
Полезные материалы
- mustache(5) – Шаблоны без логики. — официальная документация Mustache.js.
- Dynamic partials and partial collections by thelucid · Pull Request #242 · janl/mustache.js · GitHub — Pull request, вызвавший интересные дискуссии.
- Create new page · janl/mustache.js Wiki · GitHub — раздел FAQ Wiki Mustache.js на GitHub, ответы на часто задаваемые вопросы.
- Видеоурок: Mustache.js – Разбор логики if/else – YouTube — видеоурок для тех, кому комфортнее воспринимать информацию на слух.
- Три подхода к определению шаблонов в Mustache – DEV Community — обзор возможностей Mustache.js на примере конкретных кейсов.