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
テンプレート情報を保持するオブジェクトです。それぞれのアイテムは以下のキーを持っています。
キー | Type | Description |
---|---|---|
name | String | テンプレート名です。 |
html | String | テンプレートのHTMLです。 |
isLoaded | Boolean | テンプレートがすでにロードされているかを示すフラグです。 |
拡張メソッド
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要素を作成します。複製された時点では、まだドキュメントツリーにはアタッチされていません。
パラメータ
パラメータ | 型 | 説明 |
---|---|---|
templateName | String | 複製するテンプレート名です。指定がない場合は、デフォルトのテンプレート名が使われます。 |
戻り値
複製されたHTML要素です。