コンポーネントのviewをサーバーから受け取る。その1

コンポーネントのviewを外部のサーバーから取得します
index.js、index.htmlを下記に変更しましょう

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resHtmlSingleComponent(this.obj,
                                  'sample',
                                  $f.envValue('apiRoot') + '/tpl2.php',
                                  {'sample_key': 'sample_value'},
                                  {'key1': '<input type="text">', 'key2': {'val1': 2}, 'key3': {"key1": "str1", "key2": "str2", "key3": "str3", "key4": "str4", "key5": "str5"}})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }

    success(nodeList) {
        console.log("success");
    }

    error(exception) {
        alert("error");
        console.error(exception);
    }

}

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>

tpl2.phpを作成し、CORS設定したwebサーバーに配置してみましょう
CORS設定したwebサーバーはご自身で用意してください
ここでは例としてPHPでheaderメソッドを使いCORS設定します。PHPサーバーはhttp://localhost:8080とします

tpl2.php

<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://localhost:8000");
header("Access-Control-Allow-Headers: Accept, Content-Type, X-Requested-With");
header("Content-Type: application/json; charset=UTF-8");

$rawRequest = file_get_contents("php://input");
$jsonRequest = json_decode($rawRequest, true);
?>
<div>--requestData--</div>
<div><?php echo htmlspecialchars($jsonRequest['sample_key'], ENT_QUOTES)?></div>
<div data-text='v.key1'></div>
<div data-sample-obj="obj"></div>
<div><input type="text" data-sample-name="sample"></div>

src/js/components/sample/controller.jsを修正しましょう

src/js/components/sample/controller.js

export class Sample {

    constructor(data) {
    }

    init(data) {
        console.log("init");
        console.log(data);
    }

    sample_input(event) {
        this.obj.textContent = event.target.value;
    }

}

シングルコンポーネントの場合resHtmlSingleComponentメソッド、ユニークコンポーネントの場合resHtmlUniqueComponentを使います
第二引数にコンポーネント名を与えます
第三引数にviewを返すURLを与えます
第四引数にviewを返すURLに送信するリクエストパラメーターを与えます
第五引数にview内でvという変数名で使うオブジェクトを渡します
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第六引数にtrueを与えます
resHtmlSingleComponent、resHtmlUniqueComponentは第三引数で与えられたURLに第四引数に与えられたデータをPOST送信します。そのレスポンスをview.htmlとして扱います
resHtmlSingleComponent、resHtmlUniqueComponentではなく、appendResHtmlSingleComponent、appendResHtmlUniqueComponentにすると、ボディ部を置換ではなく、ボディ部に追加します
resHtmlSingleComponent、resHtmlUniqueComponentではなく、beforeResHtmlSingleComponent、beforeResHtmlUniqueComponentにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resHtmlSingleComponent、resHtmlUniqueComponentではなく、afterResHtmlSingleComponent、afterResHtmlUniqueComponentにすると、ボディ部を置換ではなく、第一引数の直後に追加します

コンポーネントのviewをサーバーから受け取る。その2

先ほどはサーバーにjsonを送信しましたが、formを送信することもできます
index.js、index.html、tpl2.phpを下記に変更しましょう

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resHtmlSingleComponentByForm(this.obj,
                                  'sample',
                                  $f.envValue('apiRoot') + '/tpl2.php',
                                  this.sampleForm,
                                  {'key1': '<input type="text">', 'key2': {'val1': 2}, 'key3': {"key1": "str1", "key2": "str2", "key3": "str3", "key4": "str4", "key5": "str5"}})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }

    success(nodeList) {
        console.log("success");
    }

    error(exception) {
        alert("error");
        console.error(exception);
    }

}

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>
    <div>
        <form data-obj="sampleForm">
            <input name="sample_key" type="text" value="sample_value">
        </form>
    </div>
</body>
</html>

tpl2.php

<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://localhost:8000");
header("Access-Control-Allow-Headers: Accept, Content-Type, X-Requested-With");
header("Content-Type: application/json; charset=UTF-8");

?>
<div>--requestData--</div>
<div><?php echo $_REQUEST['sample_key']?></div>
<div data-text='v.key1'></div>
<div data-sample-obj="obj"></div>
<div><input type="text" data-sample-name="sample"></div>

シングルコンポーネントの場合resHtmlSingleComponentByFormメソッド、ユニークコンポーネントの場合resHtmlUniqueComponentByFormを使います
第二引数にコンポーネント名を与えます
第三引数にviewを返すURLを与えます
第四引数にviewを返すURLに送信するformオブジェクトを与えます
第五引数にview内でvという変数名で使うオブジェクトを渡します
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第六引数にtrueを与えます
resHtmlSingleComponentByForm、resHtmlUniqueComponentByFormは第三引数で与えられたURLに第四引数に与えられたformをPOST送信します。そのレスポンスをview.htmlとして扱います
resHtmlSingleComponentByForm、resHtmlUniqueComponentByFormではなく、appendResHtmlSingleComponentByForm、appendResHtmlUniqueComponentByFormにすると、ボディ部を置換ではなく、ボディ部に追加します
resHtmlSingleComponentByForm、resHtmlUniqueComponentByFormではなく、beforeResHtmlSingleComponentByForm、beforeResHtmlUniqueComponentByFormにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resHtmlSingleComponentByForm、resHtmlUniqueComponentByFormではなく、afterResHtmlSingleComponentByForm、afterResHtmlUniqueComponentByFormにすると、ボディ部を置換ではなく、第一引数の直後に追加します

次ページAjax

目次