cute.js

Template engine compatible with Google Closure Compiler.
«cute.js» компилирует шаблоны в JavaScript функции, которые могут быть вызваны для обработки этого шаблона. Полученные функции во время обработки данных могут интерполировать переменные, производить произвольные вычисления, экспортировать dom-ноды и создавать компоненты. Так же скомпилированные шаблоны можно сжимать при помощи агрессивной компиляции google closure compiler.

Функционал

:::javascript
cuteJS.Engine.register(имя_шаблона, тело_шаблона, пространство_имен);

Создает шаблонную функцию по телу_шаблона и помещает ее в пространство_имен.имя_шаблона.

:::javascript
cuteJS.Engine.compile(имя_шаблона, тело_шаблона, пространство_имен);

Вернет аннотированный JavaScript код шаблонной функции, при исполнении которого шаблонная функция будет находиться в пространство_имен.имя_шаблона.

:::javascript
cuteJS.ComponentInterface;

Интерфейс, который должны реализовывать компоненты создаваемые в шаблоне. Содержит один единственный метод HTMLElement getContainer(). Этот метод должен вернуть ссылку на дом ноду, которой будет заменено место подключения компоненты в шаблоне.

Шаблонная функция

В зависимости от шаблона cute.js генерирует шаблонные функции с разными сигнатурами. Если шаблон использует входные переменные, то будет сгенерирована функция с двумя параметрами:

:::javascript
templateFunction(входные_данные, опции)

входные_данные — переменная, к которой можно обратиться в шаблоне через ключевое слово this;
опции — не обязательный параметр, через который можно установить обратные вызовы. Принимает объект вида:

:::javascript
{beforeAppendComponent: Function, afterAppendComponent: Function}

Где:
beforeAppendComponent — будет вызван перед тем как очередной компонент будет прикреплен к исходному дом дереву;
afterAppendComponent — будет вызван после того как очередной компонент будет прикреплен к исходному дом дереву.
Если шаблон не использует входные переменные, то сгенерированная функция будет иметь только один необязательный параметр опции.
Шаблонная функция возвращает объект, всегда содержащий в себе root типа DocumentFragment, который указывает на корень шаблона, и все экспортированные данные. Экспортировать можно дом ноды, вложенные шаблоны и компоненты подключенные внутри шаблона, при условии если указано имя для экспорта. Таким образом получиться объект например:

:::javascript
{
	root:  DocumentFragment, // корень шаблона
	export: HtmlDivElement, // экспортированная нода
	component: MyComponent // экспортированная компонента
	include: // root вложенного шаблона
}

Шаблон

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

Интерполирование переменных

Чтобы вывести какую либо переменную достаточно поместить ее в следующую конструкцию {{= переменная}}. В этом случае при обработке шаблона предыдущая конструкция будет заменена на значение переменной.

Экранирование переменных

Чтобы вывести экранированное значение переменной достаточно поместить её в следующую конструкцию {{- переменная}}.

Экспортирование dom-нод

Для того чтобы экспортировать ссылку на произвольную ноду, нужно добавить к ней атрибут data-export-id="{{@имя_экспорта}}", где имя_экспорта — имя по которому можно будет обратиться экспортируемой ноде. Может состоять из латинских символов произвольного регистра и цифр, не может начинаться с цифры.

Вложения шаблонов

Внутри шаблона можно использовать другие шаблоны. Для этого используется следующая конструкция {{# шаблонная_функция, входные_данные, имя_экспорта }}, где шаблонная_функция — это имя, с пространством имен, зарегистрированного или скомпилированного шаблона; входные_данные — данные приходящие на вход вложенного шаблона; имя_экспорта — имя по которому можно будет обратиться ко всем данным, экспортируемым во влагаемом шаблоне. Может состоять из латинских символов произвольного регистра и цифр, не может начинаться с цифры.

Импорт компонент

Для импорта компонент предусмотрен тег {{+ импорт }}. импорт – полное объявление импорта в синтаксисе ECMASCRIPT6.

Создание компонент

Внутри шаблона, при помощи следующей конструкции можно создавать компоненты {{% класс_компоненты, входные_данные, имя_экспорта }}, где класс_компоненты — это имя класса, реализующего интерфейс cuteJS.ComponentInterface; входные_данные — данные приходящие на вход компоненты; имя_экспорта — имя по которому можно будет обратиться к компоненте. Может состоять из латинских символов произвольного регистра и цифр, не может начинаться с цифры. Все компоненты необходимо явно импортировать.

Определение типов входных параметров

Если планируется использовать шаблонную функцию в агрессивной компиляции google closure compiler, то необходимо определить типы входных параметров. Для этого предусмотрена следующая конструкция: {{* имя тип }}, где имя — это имя переменной например this.title и так далее. Так же можно полностью определить тип входного параметра, указав в качестве имени this; тип — это тип переменной

Произвольные вычисления

Любой код помещенный в конструкцию {{ произвольный_код }} будет интерпретирован без изменений. Например, цикл можно реализовать так:

:::javascript
{{ for (var i = 0; i < array.length; i++) { }}
	{{- array[i] }}
{{ } }}

Getting Started

Download the production version or the development version.

Documentation

Execute arbitrary JavaScript code:

{{ for (var i = 0; i < 10; i++) { }}
<div>some content</div>
{{ } }}

License

Copyright (c) 2011-2016 Interfaced
Licensed under the MIT license.