コンポーネントを別サーバーに配置することができます

使い方

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.loadWebComponent(this.obj, 'http://localhost:8080/web_component', '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() {
    }

    sample1_click(event) {
        alert(this.obj.value);
    }

    sample2_click(event) {
        let str = '';
        for (const item of this.list.values()) {
            str += item.value;
        }
        alert(str);
    }

}

src/js/components/sample/view.html

<div data-text='v.key1'></div>

<div><input type='text' data-obj-web='obj' /></div>
<button data-name-web="sample1">click</button>

<div><input type='text' data-list-web='list' /></div>
<div><input type='text' data-list-web='list' /></div>
<button data-name-web="sample2">click</button>

ビルドで解説したように、コンポーネントの最終生成物はdistWork、またはdistディレクトリ内のjs/components配下のファイルです
distWork、またはdistディレクトリ内のjs/components配下のファイルをCORS設定した別サーバーの公開ディレクトリに置きます
CORS設定したwebサーバーはご自身で用意してください
例えばApacheであれば設定ファイルのDirectory、Location、Files、VirtualHostタグ内に
Header always set Access-Control-Allow-Origin http://localhost:8000
Header always set Access-Control-Allow-Credentials true
Header always set Access-Control-Allow-Headers "Accept, Content-Type, X-Requested-With"
を追加してみましょう
ここでは例としてCORS設定したwebサーバーはhttp://localhost:8080とします
今回はCORS設定したサーバーの公開ディレクトリ直下にweb_componentというディレクトリを作成し、その中にビルドによって生成されたjs/components配下のsampleディレクトリ置きます
実行してsampleボタンをクリックしてみましょう
CORS設定したサーバーに置いたコンポーネントが出力されます
loadWebComponentの第一引数にはWebコンポーネント出力先を与えます
loadWebComponentの第二引数にはWebコンポーネント格納先URLを与えます
loadWebComponentの第三引数にはコンポーネント名(ディレクトリ名)を与えます
loadWebComponentの第四引数にはWebコンポーネントのview内で使用する変数を与えます
loadWebComponentではなく、appendLoadWebComponentにすると、ボディ部を置換ではなく、ボディ部に追加します
loadWebComponentではなく、beforeLoadWebComponentにすると、ボディ部を置換ではなく、第一引数の直前に追加します
loadWebComponentではなく、afterLoadWebComponentにすると、ボディ部を置換ではなく、第一引数の直後に追加します
js/components配下にサブディレクトリを作成することもできます。その場合、loadWebComponentの第三引数にはピリオド区切りで文字列を渡します
コンポーネントのview.html内のdata-name-web属性値を持つタグとコンポーネントのcontroller.jsクラスのメソッドは自動的に結びつけられます
コンポーネントのcontroller.jsに[data-name-web属性値_イベント名]という名前のメソッドを用意しておけば、このフレームワークが自動的にコンポーネントのview.html内のdata-name-web属性値を持つタグと結びつけます
コンポーネントのview.html内のdata-obj-web属性値を持つタグとコンポーネントのcontroller.jsクラスのプロパティは自動的に結びつけられます
コンポーネントのview.html内のdata-list-web属性値を持つタグとコンポーネントのcontroller.jsクラスのプロパティは自動的に結びつけられます

Webコンポーネントはユニークコンポーネント扱いとなります。シングルコンポーネントにはできません

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

例

<script data-load-only='true'>
        l.nestVal = {'key1': 'val1'};
</script>
<div data-web-component-url='http://localhost:8080/web_component' data-web-component='sample2' data-web-component-variable='l.nestVal'></div>

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

次ページその他

目次