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.