テンプレートは各画面ごとに共通で使用するHTMLレンダリングを操作するための機能で、
Templateはそのテンプレートごとにロジックを実装できるクラスです。
テンプレート用HTMLファイルはsrc/rendering/templateディレクトリに設置してください。
例えばテンプレート名をdefaultとする場合は
設置パスはsrc/rendering/template/default.htmlとなります。
<header></header>
<main></main>
<footer></footer>
テンプレート用のHTMLで重要なことは、
各画面のコンテンツ部分がmainタグ内に挿入されるため
必ずコンテンツ部分用のmainタグをどこかに記述することです。
ViewまたはControllerにてテンプレートを指定するにはpublic変数templateを定義してください。
この場合は下記のように使用するテンプレート名を指定するだけで、テンプレートが適用されます。
import { View } from "View";
export class Page1View extends View {
public template : string = "default";
public handle() {
console.log("handle .... OK");
}
}
注意点としてライフサイクルが開始されて、handleBefore/handleAfter以後ですでに画面切替が終わっている場合は
public変数にてテンプレートを切り替えることはできません。
import { View } from "View";
export class Page1View extends View {
public handle() {
// ↓ ✕ 切り替えれない
this.template = "default";
console.log("handle .... OK");
}
}
基本的にテンプレートのHTMLファイルをsrc/rendering/template/{テンプレート名}.htmlに設置するだけで
あとは使用するテンプレート名をViewまたはController上で定義するだけでテンプレートを利用できますが、
テンプレートを表示する際にイベント処理等の特別な操作をしなければならない場合はtsファイルにてTemplateクラスを
定義する必要があります。
Templateクラスの設置場所はsrc/app/template/{テンプレート名}Template.tsのファイルパス名で下記のコードで設置します。
例えばテンプレート名をdefaultとする場合は、ファイルパスはsrc/app/template/DefaultTemplate.tsです。
import { Template } from "Template";
export class DefaultTemplate extends Template {
public handle() {
console.log("Default Template Handle .... OK");
}
}
handleメソッドがテンプレートが表示された時のイベントハンドラとなります。
上記のようにTemplateクラスを別途設置することにより、
テンプレート内でのボタンを押した際のイベント処理内容を設定することができます。
これのメリットは本来View内でコード記述しなければならないイベント処理等を
Templateに切り分けることができる点です。
例として下記のテンプレートHTML
src/rendering/template/default.htmlを用意するとします。
<header>
<a v-child="back">Back</a>
<div>Main Title</div>
</header>
<main></main>
<footer></footer>
Templateクラスsrc/app/template/DefaultTemplate.tsに下記コードを記述します。
import { Template} from "Template";
import { Response } from "Response";
export class DefaultTemplate extends Template {
public handle() {
this.vdios.back.onClick = () => {
Response.back();
};
}
}
これによりbackボタンを押すと前画面に戻ることができます。
上記のようにTemplateクラスを用意できなかった場合でも、
ViewおよびControllerにてhandleTemplateChangedメソッドを設置して
テンプレート表示時のイベントハンドラを代理で設定することはできます
例として下記のテンプレートHTML
src/rendering/template/default.htmlを用意するとします。
<header>
<a v-child="back">Back</a>
<div>Main Title</div>
</header>
<main></main>
<footer></footer>
あとはViewにて下記コードを記述します。
import { View } from "View";
import { Template} from "Template";
export class Page1View extends View {
public template : string = "default";
public handle() {
console.log("handle .... OK");
}
// Templateイベントハンドラの代理実行
public handleTemplateChanged(template : Template) {
this.vdios.back.onClick = () => {
Response.back();
};
}
}
handleTemplateChangedメソッドはテンプレートが指定したものに切り替わった際に実行される代理のイベントハンドラです。
引数にはTemplateクラスが渡されるので、 その変数を基にイベント処理などが行えます。