#Переменные в Markdown-шаблонах

Дорогие друзья, добро пожаловать в этот tutorial. В этом разделе мы шаг за шагом научимся использовать Markdown и шаблонизатор Handlebars для динамического отображения контента. В материале «Полезности Markdown-блоков» Вы уже познакомились с базовым синтаксисом, способами создания и подстановкой переменных, теперь же погрузимся в продвинутые возможности.

#1 Знакомство с шаблонизатором Handlebars

После создания Markdown-блока в правом верхнем углу настроек Вы увидите параметр «Шаблонизатор» — по умолчанию там стоит Handlebars. Handlebars позволяет динамически выводить содержимое страницы по условиям, и Markdown тоже становится «реагирующим».

#1.1 Зачем Handlebars

Markdown сам по себе поддерживает только статический контент, но через Handlebars можно по условиям (статус, число, опция) переключать тексты и стили. Так страница всегда показывает актуальную информацию даже в меняющихся бизнес-сценариях.

#2 Практические сценарии

Рассмотрим несколько полезных сценариев и реализуем их шаг за шагом.

#2.1 Обработка статуса заказа

В онлайн-демо часто нужно показывать разную подсказку в зависимости от статуса заказа. Допустим, в таблице заказов есть поле статуса со следующими значениями:

Содержимое для 4 статусов:

На странице мы получим значение статуса заказа и динамически выведем нужную информацию. Ниже подробно про синтаксис if, else и else if.

#2.1.1 Синтаксис if

С помощью if показываем содержимое при выполнении условия. Например:

{{#if условие}}
  <p>Результат</p>
{{/if}}

«Условие» использует синтаксис Handlebars (eq, gt, lt и т. д.). Простой пример:

{{#if (eq 1 1)}}
  <p>Результат: 1 = 1</p>
{{/if}}

См. эффект ниже:

#2.1.2 Синтаксис else

Если условие не выполнено, можно через else указать альтернативное содержимое:

{{#if (eq 1 2)}}
  <p>Результат: 1 = 2</p>
{{else}}
  <p>Результат: 1 ≠ 2</p>
{{/if}}

Эффект:

#2.1.3 Несколько условий

Для нескольких условий используем else if. Пример:

{{#if (eq 1 7)}}
  <p>Результат: 1 = 7</p>
{{else if (eq 1 5)}}
  <p>Результат: 1 = 5</p>
{{else if (eq 1 4)}}
  <p>Результат: 1 = 4</p>
{{else}}
  <p>Результат: 1 ≠ 7 ≠ 5 ≠ 3</p>
{{/if}}

Эффект:

#2.2 Демонстрация результата

После настройки страницы её содержимое будет динамически меняться в зависимости от статуса. Смотрите ниже:

Код страницы:

{{#if order.status}}
  <div>
    {{#if (eq order.status "1")}}
      <span style="color: orange;">Pending Approval</span>
      <p>Заказ отправлен, ожидает внутренней проверки.</p>
    {{else if (eq order.status "2")}}
      <span style="color: #1890ff;">Pending Payment</span>
      <p>Ожидаем оплату клиента. Следите за статусом.</p>
    {{else if (eq order.status "3")}}
      <span style="color: #52c41a;">Paid</span>
      <p>Оплата подтверждена, дальнейшая обработка. Консультант свяжется в течение часа.</p>
    {{else if (eq order.status "4")}}
      <span style="color: #f5222d;">Rejected</span>
      <p>Заказ не утверждён. При необходимости пересмотрите и отправьте снова.</p>
    {{/if}}
  </div>
{{else}}
  <p class="empty-state">Сейчас нет заказов в обработке.</p>
{{/if}}

Попробуйте переключать статус заказа и наблюдать за обновлением страницы — это покажет, верно ли работает Ваш код.

#2.3 Отображение позиций заказа

Помимо статуса, часто нужно показать состав заказа (список товаров). Сделаем это через each.

#2.3.1 Синтаксис each

each используется для перебора списка. Например, для массива [1,2,3]:

{{#each список}}
  <p>Результат: {{this}}</p>
  <p>Индекс: {{@index}}</p>
{{/each}}

Внутри цикла {{this}} — текущий элемент, {{@index}} — текущий индекс.

#2.3.2 Пример позиций товара

Если нужно показать все товары заказа:

{{#each $nRecord.order_items}}
    <p>{{@index}}</p>
    <p>{{this.id}}</p>
    <p>{{this.price}}</p>
    <p>{{this.quantity}}</p>
    <p>{{this.product.name}}</p>
---
{{/each}}

Если данные не появляются, убедитесь, что поле «позиции заказа» правильно отображается, иначе система посчитает их неиспользуемыми и не подтянет.

Возможно, Вы заметите, что название товара (product.name) не выводится. Причина та же — нужно явно показать связанный объект товара.

После того как мы покажем поле, можно через правила связности скрыть его обратно.

#2.4 Финальный результат: список товаров заказа

Завершив шаги выше, Вы получите готовый шаблон списка товаров заказа. Полный код:

### Список товаров заказа

{{#if $nRecord.order_items}}
  <div class="cart-summary">Итого: {{$nRecord.order_items.length}} позиций, общая сумма: ¥{{$nRecord.total}}</div>
  
  <table>
    <thead>
      <tr>
        <th>№</th>
        <th>Название товара</th>
        <th>Цена</th>
        <th>Кол-во</th>
        <th>Сумма</th>
      </tr>
    </thead>
    <tbody>
      {{#each $nRecord.order_items}}
        <tr style="{{#if this.out_of_stock}}color: red;{{/if}}">
          <td>{{@index}}</td>
          <td>{{this.product.name}}</td>
          <td>¥{{this.price}}</td>
          <td>{{this.quantity}}</td>
          <td>¥{{multiply this.price this.quantity}}</td>
          <td>
            {{#if this.out_of_stock}}
              <span>Нет в наличии</span>
            {{else if this.low_stock}}
              <span style="color:orange;">Заканчивается</span>
            {{/if}}
          </td>
        </tr>
      {{/each}}
    </tbody>
  </table>
{{else}}
  <p>Заказ пуст</p>
{{/if}}

Запустив, Вы увидите:

Чтобы лучше показать гибкость Handlebars, мы добавили в детали заказа поля «нет в наличии» (out_of_stock) и «заканчивается» (low_stock):

• При out_of_stock = true показывается «Нет в наличии», строка становится красной.
• При low_stock = true справа выводится «Заканчивается» оранжевым цветом.

#3 Итоги и рекомендации

После этого материала Вы научились использовать Handlebars для динамического рендеринга Markdown-шаблонов: ключевые конструкции if/else, циклы each и т. д. В реальной разработке для более сложной логики рекомендуем сочетать правила связности, вычисляемые поля, workflow или узлы script — это повысит гибкость и расширяемость.

Тренируйтесь и применяйте техники в проектах. Вперёд, к новым возможностям!

Если возникнут вопросы, заходите в сообщество NocoBase или загляните в официальную документацию. Удачной работы и успешного проекта!