Wrapper file (*.wrapper.js)

Core Description

The wrapper file is the main browser-side template behavior handler. It handles events and builds the basic logic of the template's behavior.

The wrapper file is easier to create either using the SublimeFCFPlugin, VSCodeFCFFramework plugins or the command:

$ fcfmngr create wrapper [TEMPLATE_NAME] [SUPER_TEMPLATE]

Where:

TEMPLATE_NAME - Name of the new template

SUPER_TEMPLATE - The path to the base template from which the new template will inherit. Optional parameter

Example template :templates/pages/template.tmpl

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

Example wrapper file for a template :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"); } }; } });

As a result, when you click on the link described in the template, the onClick () method will be called

As you can see from the example, the wrapper file is an FCF module that exports the wrapper class. All wrapper classes must inherit from the base class fcf.NClient.Wrapper.

More details about the class methods can be found at the link: fcf.NClient.Wrapper.

Subtemplate wrappers

Declaring a wrapper for a subtemplate is similar to declaring a regular wrapper, only the name of the subtemplate is added to the template name through the + sign.

Example:

Template :templates/pages/template.tmpl containing the item sub-template

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

You can create it with the command:

$ fcfmngr create wrapper template+item

File :templates/pages/template+item.wrapper.js

The wrapper for item will have a filename :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); } }; } });