Dust.JS. Краткий конспект.

Александр Ящук, Москва, 2016г.

С версии 2.6.0 dust.version содержит номер версии Дуста.


Данные для шаблона долны быть в формате JSON.


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

    
        {имя_переменной}
        

Комментарии в шаблоне:


        {!
          Multiline
          {#foo}{bar}{/foo}
        !}
        

Сохранять все переходы на новые строки, пробелы и скобки, доступно с версии 2.3.3:

 
        {` Сохранить все переходы на новые строки, пробелы и скобки `}
        

Специальные символы для static-текста:


@ - тег хелпера. Хелперы в Дусте - это JavaScript-функции, зарегистрированные объектом dust.helpers как свойство:


    dust.helpers.myHelper = function(chunk, context, bodies, params) {
            code of the helper
        }
    

Вложенные переменные по точечной нотации для данных {"name": "Ned", "amigo": { "name": "Dusty" }}:


    {amigo.name} 
    

Включение по условию:


Дуст использует несколько иное определение True/False, чем JavaScript. Для задач условного тестирования существуют только не True значения - null, undefined и пустой массив. Такие значения, как строка false, число 0 и пустые объекты считаются True. Если нужно проверить такие значения, то используйте хелперы {@eq} и {@ne}.


Секции {#friend}{name}{/friend} можно использовать вместо, порой многословной, точечнной нотации {friend.name} для следующих данных:

 
            {
            "name": "John", "nickname": "Jingleheimer Schmidt", "friend": {
                                                                            "name": "Jacob"
                                                                          }
            }
    

Допустимы самозакрывающиеся тэги, хотя в данном случае это ничего не даёт:

 
        {#friends/}
    

Если Дуст не находит в данных ссылку, определенную секцией, то он ищет их в родительских данных - не сдаётся.


Цикл - это просто секция, где ссылка на данные указывает на массив. Внутри цикла можно использовать {.} для ссылки на текущий элемент и специальные ссылки{$idx} и {$len} для вывода индекса текущего элемента и длины массива.


Пример доступа к свойствам объектов languages ({@sep} и {/sep} - указывают разделитель при выводе, в данном случае это and)}:


Могут применяться фильтры через символ пайпа, например, {name|s}. Фильры могут каскадироваться: {name|s|h|u} и применяются при этом слева направо:


Инлайн-параметры:

Применяют инлайн-параметры для разрешения конфликтов имён при использовании внутри секции таких же имён, как уже есть вне секции:

Порции (partials) - включаемый шаблон (инклюд). Находит шаблон с именем profile и вставляет его в текущий шаблон:


                {>profile/} 
    

Вставить в темплейт с телом страницы header и footer:

 
                {>header /}
                    ... а здесь темплейт для тела страницы ...
                {>footer /}
    

Так можно создавать шаблоны в Runtime-e:


                {>profile:user/}
                {>"posts/{type}.dust.html"/}
    

Блоки типа {+title} ... {/title} в автономном режиме просто выводят данные, а при включении в другой шаблон с тегами типа {<tag1} ... {/tag1} переопределяют данные базового блока.

Может быть самозакрывающийся {+блок/}, он не отображается, если включаемый шаблон переопределяет содержимое этого блока.


Для общего пользования рекомендуется предкомпиляция:

С версии 2.6.0 доступен автономный дуст-компилятор: dustc [options] [path1], например:


                  dustc --output=compiled.js tmpl/**/*.dust
         

Визуализация шаблонов:

Движок визуализации (rendering engine) поддерживает два интерфеса - callback и streaming. (В Тюменском проекте используется интерфейс callback. - привет Игорь и Дима!) Для отрисовки шаблона вызывают call.render с именем шаблона, объектом контекста и callback-функцией. (Функция обратного вызова - передача исполняемого кода в качестве одного из параметров другого кода. Обратный вызов позволяет в функции исполнять код, который задаётся в аргументах при её вызове. Этот код может быть определён в других контекстах программного кода и быть недоступным для прямого вызова из этой функции.):


              dust.render("intro", {name: "Fred"}, function(err, out) {
                  console.log(out);
              });
    
которая выведет в консоль: Hello Fred!

Отладка шаблонов

В дополнение к хелперу contextDump Дуст, начиная с версии 2.1.0, имеет опцию отладки. Логи выводятся в консоль. Для активации отладки нужно установить dust.isDebug = true.

Переменная для установки уровня отладки: dust.debugLevel = 'DEBUG' | 'INFO' | 'WARN' | 'ERROR'. По умолчанию - INFO.


Контекст

Контекст - специальный объект, который обрабатывает переменную поиска и контролирует поведение шаблона, он является интерфейсом между логикой приложения и шаблоном. Контекст можно представить в виде иерархии объектов, которая растет по мере спуска во вложенные секции.

При поиске ключа Дуст проходит стек контекста снизу вверх. Нет необходимости объединять функции хелперов с данными шаблона, вместо этого создают базовый контекст, в который можно положить локальные данные шаблона:


Обработчики (Handlers)

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


                {
                    name: function() {
                        return "Bob";
                    }
                }
    

Порция (Чанк, Chunk) - это примитив в Дусте для контролирования хода шаблона. В зависимости от поведения, определенного в контексте, шаблон может выводить один или несколько чанков во время рендеринга. Хендлер, который пишет напрямую в чанк должен возвращать измененный чанк:


                {
                    name: function(chunk) {
                        return chunk.write("Bob");
                    }
                }
    

Доступ к контексту

Обработчики (хендлеры) имеют доступ к контексту объекта.

продолжение следует ;^)
------------------------------------------------------


Доступ к параметрам Body

продолжение следует ;^)
------------------------------------------------------


Доступ к встроенным (Inline) параметрам

продолжение следует ;^)
------------------------------------------------------


Асинхронные Хендлеры

продолжение следует ;^)
------------------------------------------------------






На главную
К началу страницы