このフレームワークにおいてコンポーネントとはテンプレートとJavaScriptがセットになったものです

イベント処理

index.html、index.jsを下記に変更しましょう

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.loadSingleComponent(this.obj, 'sample', {'key1': 'val1'})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }
    
    success(nodeList) {
        console.log("success");
    }
    
    error(exception) {
        alert("error");
        console.error(exception);
    }
    
}

src/js/components/sample/controller.js、src/js/components/sample/view.htmlを作成しましょう

src/js/components/sample/controller.js

export class Sample {

    constructor() {
    }

    sample_click(event) {
        alert("Hello component");
    }

}

src/js/components/sample/view.html

<div data-text='v.key1'></div>
<button data-sample-name="sample">click</button>

実行してsampleボタンをクリックしてみましょう
src/js/components/sample/view.htmlに、$f.loadSingleComponentの第三引数の値が埋め込まれて出力されます
loadSingleComponentの第二引数にはsrc/js/components配下のディレクトリ名を与えます
src/js/components配下のディレクトリ名のことをこれ以降コンポーネント名と呼びます
コンポーネントはsrc/js/components配下にcontroller.js、view.htmlの2ファイルをセットで作成します。これは、このフレームワークの規則です
loadSingleComponentメソッドは、src/js/components/コンポーネント名/view.htmlを読み込み、src/js/components/コンポーネント名/controller.jsをimportします
そして、view.html内のdata-コンポーネント名-name属性値を持つタグとcontroller.jsクラスのメソッドを結びつけます
controller.jsに[data-コンポーネント名-name属性値_イベント名]という名前のメソッドを用意しておけば、このフレームワークが自動的にview.html内のdata-コンポーネント名-name属性値を持つタグと結びつけます
さらに、view.htmlに、第三引数に渡された値を埋め込んで、第一引数のボディ部を置換します
loadSingleComponentの戻り値はPromiseです。view.htmlがwebページに埋め込まれ、controller.jsと結びつけできたらresolveされます
view.htmlはテンプレートとして処理されます
テンプレート内ではloadSingleComponentメソッドの第三引数をvという変数名で使うことができます
controller.jsのクラス名をディレクトリ名の先頭大文字キャメルケースにするのはこのフレームワークの規則です
loadSingleComponentではなく、appendLoadSingleComponentにすると、ボディ部を置換ではなく、ボディ部に追加します
loadSingleComponentではなく、beforeLoadSingleComponentにすると、ボディ部を置換ではなく、第一引数の直前に追加します
loadSingleComponentではなく、afterLoadSingleComponentにすると、ボディ部を置換ではなく、第一引数の直後に追加します
src/js/components配下にサブディレクトリを作成することもできます。その場合、loadSingleComponentの第二引数にはピリオド区切りで文字列を渡します。data-コンポーネント名-name属性はハイフンつなぎにします。
例えば、src/js/components/sub/sample/controller.js、view.htmlを作成した場合、loadSingleComponentの第二引数には'sub.sample'を渡します。data-コンポーネント名-name属性はdata-sub-sample-nameとなります。controller.jsのクラス名はSampleとなります
コンポーネント名がキャメルケースの場合、loadSingleComponentの第二引数にはキャメルケースのまま文字列を渡します。data-コンポーネント名-name属性はハイフンつなぎにします
例えば、src/js/components/sampleCamel/controller.js、view.htmlを作成した場合、loadSingleComponentの第二引数には'sampleCamel'を渡します。data-コンポーネント名-name属性はdata-sample-camel-nameとなります。controller.jsのクラス名はSampleCamelとなります

複数処理

moduleと同じでカンマ区切りで複数メソッドを結びつけることができます

前処理、後処理

moduleと同じでbeforeEvent、afterEventメソッドでイベントの共通前処理、後処理を定義できます
前に実行されたメソッドがfalseを返した場合、後のメソッドが実行されなくなります

結びつけられる時の前処理、後処理

moduleと同じでbeforeName、afterNameメソッドでdata-コンポーネント名-name属性を持つタグとこのクラスのメソッドが結びつけられるときの前処理、後処理を定義できます

結びつけが解除される時の前処理、後処理

moduleと同じでbeforeRemoveName、afterRemoveNameメソッドでdata-コンポーネント名-name属性を持つタグとこのクラスのメソッドの結びつけが解除される時の前処理、後処理を定義できます

エラー処理

moduleにerrorHandleメソッドが定義されていると、処理で例外がthrowされたときはmoduleのerrorHandleメソッドが実行されます

終了処理

moduleにfinalHandleメソッドが定義されていると、コンポーネントの処理が成功しても例外がthrowされてもmoduleのfinalHandleメソッドが実行されます

テンプレート、コンポーネントのview.htmlからシングルコンポーネントを呼び出す

例

<script data-load-only='true'>
        l.nestVal = {'key1': 'val1'};
</script>
<div data-single-component='sample2' data-single-component-variable='l.nestVal'></div>

data-single-component属性値はloadSingleComponentの第二引数と同じです
data-single-component-variable属性値はloadSingleComponentの第三引数と同じです
data-single-component、data-single-component-variable属性が付いたタグの内部にシングルコンポーネントがロードされます

次ページシングルコンポーネントのプロパティと画面上の要素の紐づけ

目次