Перейти к содержанию

Блок "HTML-шаблон"

Блок доступен начиная с версии 0.10

Назначение блока

Блок позволяет формировать динамически изменяемый визуализатор HTML. Содержит тот же функционал, что и Блок "HTML-статика", но позволяет изменять свое содержимое с помощью шаблонизатора Jinja2.

Перед началом работы с блоком его необходимо выбрать в библиотеке и переместить в область графа.

Настройки блока

Работа с настройками блока осуществляется через локальное меню (пункт Настройки):

Общие настройки блоков описаны в отдельном разделе.

Раздел "HTML шаблон"

Название параметра Тип параметра Обязательный Описание Пример
Шаблон Строка (HTML) Нет html-код, который будет отображен в визуализаторе. Может включать в себя стили css и Jinja-шаблоны.
Разрешать копировать текст Флаг Да Устанавливает разрешение на копирование содержимого в визуализаторе при отображении пользователю.
Строгая валидация HTML Флаг Нет Включает строгую валидацию HTML: в случае ошибки валидации блок выдаст ошибку. По умолчанию будет выдано предупреждение.
HTML с Jinja шаблоном 
    <title>Jinja шаблон</title>
    <ul>
        {{ '{%' }} for k in input.vl%}          
        <li>{{ '{{' }} k }}</li>    
        {{ '{%' }} endfor %}    
    </ul>

Входы блока

Общие настройки входов блока описаны в отдельном разделе.

Название входа Тип Обязательный Описание
Данные для шаблона JSON Нет Данные, необходимые для подстановки в HTML-код с помощью шаблонизатора Jinja, см. Описание работы блока

Выходы блока

Общие настройки выходов блока описаны в отдельном разделе.

Название входа Тип Обязательный Описание
HTML (Строка) Строка Нет HTML-код в виде строки, отображаемый в визуализаторе

Если исходный код содержит Jinja-шаблон, на выходе он будет передан с уже выполненной подстановкой данных.

События блока

В блоке нет событий.

Описание работы блока

Возможности блока "HTML-шаблон" идентичны блоку "HTML-статика", но за счет использования шаблонизатора Jinja, блок может динамически менять свое содержимое. Шаблонизатор получает данные, поступившие на вход "Данные для шаблона", и размещает их в коде html.

Jinja-шаблоны — распространенный способ генерации статических HTML-страниц (например, используется в Django). Для применения шаблона необходимо знать структуру данных, поступивших на вход. Данные всегда представлены в формате JSON, и к их полям можно обращаться напрямую через шаблон.

Важно!

Корневой элемент всегда должен называться input

Ниже представлен пример работы шаблонизатора:

  1. В графе генерируется временной ряд (Блок "Генерация временного ряда");
  2. После этого в шаблоне формируется список из всех значений ряда. На момент создания графа количество элементов неизвестно, поэтому используется шаблон.

HTML с Jinja шаблоном 
<title>Jinja шаблон</title>

<ul>
{{ '{%' }} for k in input.vl%}

<li>{{ '{{' }} k }}</li>
{{ '{%' }} endfor %}
</ul>

Шаблон всегда должен обращаться к входу с именем input. Из него берется массив vl, содержащий значения ряда. Структуру входных данных можно посмотреть в режиме отладки графа на входе "Данные для шаблона" блока.

После пересчета графа в визуализаторе отображается сформированный html-код. Из всех значений ряда, поступивших на вход, строится линейный список.

Механизм Jinja поддерживает основные управляющие конструкции if, for, while, что позволяет гибко управлять содержимым HTML-шаблона.

Валидация HTML

В блоке расположен HTML-валидатор и санитайзер, которые, в случае некорректного HTML на входе, выдадут соответствующие ошибки (код ошибки 141 для валидатора и код ошибки 152 для санитайзера).

В связи со сложной структурой HTML не все ошибки могут быть обнаружены. Например, встроенный валидатор не проверяет наличие закрывающих тегов. Для более полной и корректной проверки рекомендуется использовать сторонние сервисы, к примеру validator.w3.org.

Подробнее о санитайзере можно узнать здесь

Описание работы визуализатора

  • Представляет собой контейнер для отображения пользовательского html-кода с использованием шаблонов Jinja;
  • Доступен в режиме отладки графа;
  • Поддерживает выделение содержимого мышью.

Настройки визуализатора

Визуализатор не имеет специфических настроек. Общий список доступен на странице Настройки визуализаторов

Полезные ссылки

Дополнительно

Для корректного отображения данных с использованием шаблона необходимо знать внутреннюю структуру данных, поступающих на вход от других блоков.