Использование 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), если одна и та же логика постоянно повторяется, чтобы избежать дублирования кода.
• Старайтесь всегда проверять и очищать данные модели, чтобы избежать неожиданных ситуаций в процессе исполнения кода.

Полезные материалы

1. mustache(5) – Шаблоны без логики. — официальная документация Mustache.js.
2. Dynamic partials and partial collections by thelucid · Pull Request #242 · janl/mustache.js · GitHub — Pull request, вызвавший интересные дискуссии.
3. Create new page · janl/mustache.js Wiki · GitHub — раздел FAQ Wiki Mustache.js на GitHub, ответы на часто задаваемые вопросы.
4. Видеоурок: Mustache.js – Разбор логики if/else – YouTube — видеоурок для тех, кому комфортнее воспринимать информацию на слух.
5. Три подхода к определению шаблонов в Mustache – DEV Community — обзор возможностей Mustache.js на примере конкретных кейсов.