Bitsmist Frameworks
Docs » TemplateOrganizer

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.

KeyTypeDescription
nameStringThe template name.
htmlStringThe template html.
isLoadedBooleanA 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

ParameterTypeDescription
templateName
Required
StringA 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

ParameterTypeDescription
templateName
Required
StringA 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

ParameterTypeDescription
templateNameStringA template name to clone. If not specified, the default template name will be used.

Return Value

An HTML element cloned from the template.

Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • TemplateOrganizer
    • Overview
    • Organizing
    • Settings
      • templateName
      • type
      • rootNode
      • template
    • Extended Properties
      • activeTemplateName
      • templates
    • Extended Method
      • addTemplate(templateName, options)
      • applyTemplate(templateName)
      • cloneTemplate(templateName)

GENERAL

  • Overview
  • Installation
  • Create a sample component

COMPONENT

  • Loading
  • Settings
  • Events
  • Extending with organizers

REFERENCE - COMPONENT

  • Component

REFERENCE - ORGANIZER

  • EventOrganizer
  • LoaderOrganizer
  • OrganizerOrganizer
  • SettingOrganizer
  • StateOrganizer
  • TemplateOrganizer

REFERENCE - STORE

  • Store
  • ChainableStore

REFERENCE - UTILITY

  • AjaxUtil
  • ClassUtil
  • Util