Bitsmist Frameworks
Docs » TemplateOrganizer

TemplateOrganizer

継承:Organizer

概要

TemplateOrganizerはコンポーネントのHTMLテンプレートのロードとノードへのアタッチなど、HTMLファイル関係の処理を担当します。

オーガナイズ処理

初期化時には、コンポーネントの“settings.templateName”オプションがセットされてない場合、デフォルトの値をセットします。デフォルトの値は“settings.fileName”が設定されていればそれを、されていなければタグ名です。

オーガナイズ処理時にはテンプレートHTMLをロードし、ノードにアタッチします。“beforeStart”のタイミングではタイプが“html”、“url”のみを対象にします。“afterAppend”ではタイプが“node”のみを対象とします。

セクション

  • templates

タイミング

  • beforeStart
  • afterAppend

設定

テンプレート設定は“templates”セクションに記述します。

書式:

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

templateName

型:String

テンプレート名を指定します。

type

型:String

HTMLテンプレートのタイプを指定します。タイプは“html”、“url”、“node”のいずれかです。

rootNode

型:String

特定のノードを指し示すセレクタ文字列を指定します。書式はquerySelector()と同じです。そのノードがテンプレートとして利用されます。

template

型:String

HTMLの文字列を指定します。これはHTMLであって、HTMLのファイル名ではありません。

拡張プロパティ

activeTemplateName

型:String get/set

現在有効なテンプレートの名前です。

templates

型:Object get

テンプレート情報を保持するオブジェクトです。それぞれのアイテムは以下のキーを持っています。

キーTypeDescription
nameStringテンプレート名です。
htmlStringテンプレートのHTMLです。
isLoadedBooleanテンプレートがすでにロードされているかを示すフラグです。

拡張メソッド

addTemplate(templateName, options)

型:undefined Inject:Component

コンポーネントにテンプレートHTMLをロードします。ロードするのみでノードにはアタッチしません。既にロード済みの場合は、ロードされません。

実際のロード作業はローダのloadTemplate()メソッドを呼び出すことで行われます。

パラメータ

パラメータ型説明
templateName
必須
String対象となるテンプレート名です。これに“.html”をつけたものがファイル名となります。

戻り値

なし。

applyTemplate(templateName)

型:undefined Inject:Component

コンポーネントのinnerHTMLプロパティにテンプレートのHTMLをセットすることで、テンプレートを適用します。指定されたテンプレートが既にアクティブの場合、何もしません。テンプレートが適用されると、アクティブなテンプレート名はこのテンプレート名にセットされます。

指定されたテンプレートがまだロードされてない場合、例外が発生します。

パラメータ

パラメータ型説明
templateName
必須
String適用するテンプレートの名前です。

戻り値

undefined

cloneTemplate(templateName)

型:HTMLElement Inject:Component

テンプレートをもとにHTML要素を作成します。複製された時点では、まだドキュメントツリーにはアタッチされていません。

パラメータ

パラメータ型説明
templateNameString複製するテンプレート名です。指定がない場合は、デフォルトのテンプレート名が使われます。

戻り値

複製されたHTML要素です。

Previous Next

© 2019-2023 Masaki Yasutake

Bitsmist Frameworks

Table of Contents

Table of Contents

  • TemplateOrganizer
    • 概要
    • オーガナイズ処理
    • 設定
      • templateName
      • type
      • rootNode
      • template
    • 拡張プロパティ
      • activeTemplateName
      • templates
    • 拡張メソッド
      • addTemplate(templateName, options)
      • applyTemplate(templateName)
      • cloneTemplate(templateName)

全般

  • 概要
  • インストール
  • サンプルコンポーネントを作る

コンポーネントについて

  • ロード
  • 設定
  • イベント
  • オーガナイザによる拡張

リファレンス - コンポーネント

  • Component

リファレンス - オーガナイザ

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

リファレンス - ストア

  • Store
  • ChainableStore

リファレンス - ユーティリティ

  • AjaxUtil
  • ClassUtil
  • Util