コンポーネント全体

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.loadUniqueComponent(this.obj, 'sample')
        .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($f.componentEnvValue(this, 'key1') + ' ' + $f.componentEnvValue(this, 'key2') + ' ' + $f.componentEnvValue(this, 'key3'));
    }

}

src/js/components/sample/view.html

<button data-sample-name="sample">component sample</button>

src/js/components/envValue.json、src/js/components/envValue.local.jsonを作成しましょう

src/js/components/envValue.json

{
     "key1" : "value1"
    ,"key2" : "value2"
}

src/js/components/envValue.local.json

{
     "key2" : "value2_local"
    ,"key3" : "value3_local"
}

実行してsampleボタンをクリック後、component sampleボタンをクリックしてみましょう
value1 value2_local value3_localとalertが出力されます
controller.js内で実行している$f.componentEnvValueは
src/js/components配下のenvValue.jsonの値を返すメソッドです
componentEnvValueは第一引数にコンポーネントインスタンス、第二引数にenvValue.jsonのキーを受け取ります
envValue.jsonはjsonなのでキー、値はダブルクォートで囲います。シングルクォートではありません
コンポーネントで使うenvValue.jsonはsrc/js/components配下に作成します。これはフレームワークの規則です
また、envValue.jsonだけでなく、envValue.{環境}.jsonを用意できます
envValue.json、envValue.local.json両方に同じキーがある場合、envValue.local.jsonが優先されます

コンポーネント固有

src/js/components/sample/envValue.json、src/js/components/sample/envValue.local.jsonを作成しましょう

src/js/components/sample/envValue.json

{
    "key2" : "sample_value2"
}

src/js/components/sample/envValue.local.json

{
    "key3" : "sample_value3_local"
}

実行してsampleボタンをクリック後、component sampleボタンをクリックしてみましょう
value1 sample_value2 sample_value3_localとalertが出力されます
src/js/components/sample配下に作成したenvValue.jsonは、componentEnvValueメソッドの第一引数がsrc/js/components/sample/controller.jsのインスタンスである場合にのみ使用できます

次ページコンポーネントのメッセージ

目次