Файл враппера (*.wrapper.js)

Описание ядра

Файл враппера является основным обработчиком поведения шаблона на стороне браузера. В нем выполняется обработка событий и выстраивается основная логика поведения шаблона.

Файл враппера проще создавать, либо используя плагины SublimeFCFPlugin, VSCodeFCFFramework, либо команду:

$ fcfmngr create wrapper [TEMPLATE_NAME] [SUPER_TEMPLATE]

Где:

TEMPLATE_NAME - Имя нового шаблона

SUPER_TEMPLATE - Путь к базовому шаблону, от которого будет наследоваться новый шаблон. Необязательный параметр

Пример шаблона :templates/pages/template.tmpl

//~TEMPLATE <a fcfEventClick="wrapper.onClick()">LINK</a>

Пример файла враппера для шаблона :templates/pages/template.tmpl

fcf.module({ name: "templates/pages/template.wrapper.js", dependencies: ["fcf:NClient/Wrapper.js"], module: function(Wrapper){ return class WrapperImpl extends Wrapper{ constructor(a_initializeOptions){ super(a_initializeOptions); } onClick(){ alert("Click on link"); } }; } });

В результате при нажатии на ссылку описанную в шаблоне, будет вызван метод onClick()

Как видно из примера файл враппера представляет собой модуль FCF, который экспортирует класс враппера. Все классы врапперов в своей основе должны наследоваться от базового класса fcf.NClient.Wrapper.

Более подробно о методах класса можно узнать по ссылке: fcf.NClient.Wrapper.

Врапперы подшаблонов

Объявление враппера для подшаблона аналогично объявлению обычного враппера, только к имени шаблона через знак + добавляется имя подшаблона.

Пример:

Шаблон :templates/pages/template.tmpl содержащий подшаблон item

//~TEMPLATE some content //~TEMPLATE item some content subtemplate

Враппер для item будет иметь имя файла :templates/pages/template+item.wrapper.js

Создать его можно командой:

$ fcfmngr create wrapper template+item

Файл :templates/pages/template+item.wrapper.js

fcf.module({ name: "templates/pages/template+item.wrapper.js", dependencies: ["fcf:NClient/Wrapper.js"], module: function(Wrapper){ return class WrapperImpl extends Wrapper{ constructor(a_initializeOptions){ super(a_initializeOptions); } }; } });