Как отключить обработку выражений в комментариях Handlebars.js

Быстрый ответ

Если вы не хотите, чтобы комментарии в шаблонах Handlebars отображались в итоговом HTML, вы можете использовать следующий синтаксис:

{{!-- Этот комментарий в Handlebars будет скрыт в результирующем коде, словно действие ниндзя --}}
<div>
  <p>Ваш контент</p>
</div>

Такой подход помогает поддерживать порядок в шаблонах и сокращает объём передаваемых данных, т.к. комментарии не вносятся в окончательный HTML.

Как использовать комментарии в Handlebars – подробное руководство

Когда вы работаете с Handlebars, вам, вероятно, понадобятся комментарии двух разновидностей:

Блочные комментарии Handlebars

Временно скрывайте с их помощью большие фрагменты кода и выражения Handlebars. Они не будут воспроизведены в HTML:

{{!-- Здесь блочный комментарий, скрывающий даже выражения Handlebars
{{if user.isAdmin}}
  <button>Удалить пользователя</button>
{{/if}}
--}}

Подробнее об этом расскажет наш спикер на видео

Однострочные комментарии Handlebars

Когда вам нужны короткие заметки, используйте {{!.. Такой тип комментариев следует размещать в начале каждой строки, где они применяются:

{{! Как хайку, коротко и емко }}

HTML-комментарии для обозримости в коде

Если вы хотите, чтобы комментарии были заметны при просмотре исходного кода страницы, применяйте стандартные HTML-комментарии:

<!-- Этот комментарий будет отображен в итоговом HTML. -->

Комментарии Handlebars остаются скрытыми, в то время как HTML-комментарии видны при просмотре кода страницы.

Блуждание в лабиринте комментариев Handlebars

Комментарии могут оказать вам помощь при работе с Handlebars:

Пауза в работе шаблона

Вы можете использовать комментарии для временного приостановления действия отдельных элементов логики в шаблоне:

{{!-- Временно отключенная логика
{{#if user.isPremium}}
  Перерыв на попкорн.
{{/if}} 
--}}

Ошибка: встроенные комментарии

Handlebars не поддерживает встроенные блочные комментарии. Попытка их использования вызовет ошибку парсера:

{{!-- Начинаем захватывающую игру.
{{!-- Попытка скрыть ещё один комментарий --}} 
Это вызовет ошибку при разборе.
--}}

Структурирование кода

С помощью комментариев вы можете руководить процессом разработки сложных шаблонов:

<div>
  <!-- Шаг 1: Задаем основу -->
  <p>{{user.fullName}}</p>
  {{!-- Шаг 2: Добавим кнопку выхода позже
  <button>Выйти</button>
  --}}
</div>

Визуализация

Ваше сообщение могло быть зашифровано секретным агентом:

Сообщение (📡): "Начало... [Пауза] ...Продолжение"

А вот код на языке Морзе заметно выделяется скрытым содержимым:

{{! Секретный сигнал Морзе. Только для глаз агента 007. }}

И в завершение двусмысленное обращение агента:

📡: "Начало... {{! Секретный приказ: отменить операцию }} ...Продолжение"

Сообщение продолжается, но скрытая инструкция ожидает своего часа.

Нон-стоп охрана кода – минимизация комментариев

Важно сохранять чистоту кода, поэтому избегайте:

• Заполнения кода явно очевидными комментариями.
• Позволения устаревшим комментариям вносить смуту.
• Если логика кода смутна, рассмотрите возможность её рефакторинга, вместо того чтобы использовать комментарии в качестве маски.

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

1. Введение в Handlebars – полное руководство по использованию комментариев в Handlebars.
2. Issue Tracker handlebars-lang/handlebars.js на GitHub – место для обсуждения и решения проблем, связанных с использованием Handlebars.
3. Руководство для начинающих по Handlebars на сайте SitePoint – подходит для тех, кто хочет быстро освоить данный инструмент.
4. Теги Handlebars на CodePen – сборник примеров и экспериментов с Handlebars, включая примеры использования комментариев.