TemplateOrganizer

Inherit:Organizer

Overview

TemplateOrganizer handles the management of HTML such as loading HTML files and appending the files to nodes.

Organizing

At the initialization stage, it sets “settings.templateName” to the default template name if it is not specified. The default template name is “settings.fileName” if specified or tag name if not specified.

At the organizing stage, it loads an HTML file and attaches it to the node. On “beforeStart” it treats only “html”, “url” type, while only “node” type on “afterAppend”.

Sections

templates

Timings

beforeStart
afterAppend

Settings

Template settings are placed in “templates” section.

Syntax:

{
    "templates": {
        <templateName>: {
            "type": <type>,
            "rootNode": <rootNode>
        }
    },
}

templateName

Type:String

The template name.

type

Type:String

A type of HTML template. The types are “html”, “url” or “node”.

rootNode

Type:String

The selector string that points to a node. The syntax is the same as querySelector(). The node is used as a template.

template

Type:String

An HTML string. Not an HTML filename, but HTML.

Extended Properties

activeTemplateName

Type:String get/set

The template name is currently active.

templates

Type:Object get

An object that holds templates information. Each item has the following keys.

Key	Type	Description
name	String	The template name.
html	String	The template html.
isLoaded	Boolean	A flag whether the template file is already loaded or not.

Extended Method

addTemplate(templateName, options)

Type:undefined Inject:Component

Loads a template file. It only loads and doesn't attach to the node. It will not load if the template is already loaded.

Actual loading will be done by calling the loader's loadTemplate() method.

Parameters

Parameter	Type	Description
templateName `Required`	String	A template name to load. The filename will be this value + “.html”.

Return Value

undefined

applyTemplate(templateName)

Type:undefined Inject:Component

Apply the template HTML to the component by setting the innerHTML property of the component to the template HTML. It does nothing if the template is already active. After the template is applied, the active template name is set to this template name.

The specified template needs to be already loaded or the exception will be raised.

Parameters

Parameter	Type	Description
templateName `Required`	String	A template name to apply.

Return Value

undefined

cloneTemplate(templateName)

Type:HTMLElement Inject:Component

Creates an HTML element from the template. It is not attached to any document tree at the point of cloning.

Parameters

Parameter	Type	Description
templateName	String	A template name to clone. If not specified, the default template name will be used.

Return Value

An HTML element cloned from the template.