BEMJSON → шаблоны → HTML

BEMJSON описывает структуру блока: его имя, элементы, текст и модификаторы. Изменяйте JSON в редакторе и сравнивайте HTML, дерево после шаблонов и предпросмотр. Пример обрабатывает настоящий движок nuckty в браузере.

Как шаблон меняет разметку

Для карточки шаблон задаёт тег article, для элемента title — h2, для description — p. Имена блока и элементов становятся БЭМ-классами: card, card__title, card__description.

import { block } from 'nuckty';

export default function templates(): void {
    block('card')({ tag: 'article' });
    block('card').elem('title')({ tag: 'h2' });
    block('card').elem('description')({ tag: 'p' });
}

Редактор регистрирует эти правила в коллекции Templates и вызывает render из ядра. Раскройте «Дерево после шаблонов», чтобы увидеть промежуточный результат; затем движок сериализует его в HTML.

Что изменить в примерах

1. В карточке замените Hello, nuckty — текст в HTML и предпросмотре изменится сразу.
2. Добавьте в объект карточки поле "mods": { "color": "orange" }, отделив его запятой. В HTML появится класс card_color_orange, в предпросмотре — оранжевая рамка и фон.
3. Выберите «Список». Поле "tightList": true разрешает движку опустить закрывающие теги li в этом примере.
4. Выберите «Кнопка с модификатором» и поменяйте "disabled": true на false. Шаблон перестанет добавлять атрибут disabled, и кнопка станет доступной.
5. Выберите «Экранирование». Угловые скобки попадут в HTML как сущности, а в предпросмотре останутся текстом.
6. Удалите кавычку в JSON — редактор покажет ошибку. Верните кавычку или нажмите «Сбросить».

Предпросмотр открыт в отдельном iframe с пустым атрибутом sandbox: скрипты из введённого HTML не исполняются. JSON меняет пример в редакторе; исходники сайта он не записывает.

Посмотреть файлы сборки