JavaScript フレームワーク fairy support js
目次
コンポーネントに渡す値をサーバーから受け取る

コンポーネントに渡す値をサーバーから受け取る。その1

これまでview.html内でvという変数名で使うことができる値をjsonで与えていましたが、これをサーバーから受信したjsonにすることができます
src/js/env/envValue.local.jsonを作成しましょう

src/js/env/envValue.local.json 
{
    "apiRoot" : "http://localhost:8080"
}

src/js/modules/index.js、src/page/index.htmlを修正しましょう

src/js/modules/index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resJsonSingleComponent(this.obj, 'sample', $f.envValue('apiRoot') + '/tpl.php', {'sample_key': 'sample_value'})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }

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

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

}
src/page/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>

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

tpl.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);

$responseJson = array(
    'key1' => '<input type="text">',
    'key2' => array(
        'val1' => 2
    ),
    'key3' => array(
        "key1" => "str1",
        "key2" => "str2",
        "key3" => "str3",
        "key4" => "str4",
        "key5" => "str5"
    ),
    'request_value' => $jsonRequest['sample_key']
);

echo json_encode($responseJson);

例としてPHPでjsonを返すサーバープログラムを示しました。これがドキュメントルート直下に設置されているとします


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

src/js/components/sample/controller.js 
export class Sample {

    constructor(data) {
    }

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

}
src/js/components/sample/view.html 
<div data-text='v.key1'></div>

<div data-if='v.key2.val1 === 1'>
    v.key2.val1 === 1
</div>
<div data-elseif='v.key2.val1 === 2'>
    v.key2.val1 === 2
</div>
<div data-else=''>
    else
</div>

<div data-foreach='v.key3' data-foreach-key='arrKey' data-foreach-value='arrVal'>
    <span data-if='l.arrVal === "str2"' data-continue='1' data-tag='hidden'></span>
    <span data-if='l.arrVal === "str4"' data-break='1' data-tag='hidden'></span>
    <span data-text='l.arrKey'></span>
    <span>:</span>
    <span data-text='l.arrVal'></span>
</div>

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

シングルコンポーネントの場合resJsonSingleComponentメソッド、ユニークコンポーネントの場合resJsonUniqueComponentを使います
第二引数にコンポーネント名を与えます
第三引数にjsonを返すURLを与えます
第四引数にjsonを返すURLに送信するリクエストパラメーターを与えます
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第五引数にtrueを与えます
resJsonSingleComponent、resJsonUniqueComponentは第三引数で与えられたURLに第四引数に与えられたデータをPOST送信します。そのレスポンスのJSONをコンポーネントに渡します
resJsonSingleComponent、resJsonUniqueComponentではなく、appendResJsonSingleComponent、appendResJsonUniqueComponentにすると、ボディ部を置換ではなく、ボディ部に追加します
resJsonSingleComponent、resJsonUniqueComponentではなく、beforeResJsonSingleComponent、beforeResJsonUniqueComponentにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resJsonSingleComponent、resJsonUniqueComponentではなく、afterResJsonSingleComponent、afterResJsonUniqueComponentにすると、ボディ部を置換ではなく、第一引数の直後に追加します


コンポーネントに渡す変数をサーバーから受け取る。その2

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

index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resJsonSingleComponentByForm(this.obj, 'sample', $f.envValue('apiRoot') + '/tpl.php', this.sampleForm)
        .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>
tpl.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");

$responseJson = array(
    'key1' => '<input type="text">',
    'key2' => array(
        'val1' => 2
    ),
    'key3' => array(
        "key1" => "str1",
        "key2" => "str2",
        "key3" => "str3",
        "key4" => "str4",
        "key5" => "str5"
    ),
    'request_value' => $_REQUEST['sample_key']
);

echo json_encode($responseJson);

index.htmlにformタグを追加し、data-obj="sampleForm"を付けました
index.jsではシングルコンポーネントの場合resJsonSingleComponentByForm、ユニークコンポーネントの場合resJsonUniqueComponentByFormを使います
第四引数にjsonを返すURLに送信するformオブジェクトを与えます
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第五引数にtrueを与えます
resJsonSingleComponentByForm、resJsonUniqueComponentByFormは第三引数で与えられたURLに第四引数に与えられたformをPOST送信します。そのレスポンスのJSONをコンポーネントに渡します
resJsonSingleComponentByForm、resJsonUniqueComponentByFormではなく、appendResJsonSingleComponentByForm、appendResJsonUniqueComponentByFormにすると、ボディ部を置換ではなく、ボディ部に追加します
resJsonSingleComponentByForm、resJsonUniqueComponentByFormではなく、beforeResJsonSingleComponentByForm、beforeResJsonUniqueComponentByFormにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resJsonSingleComponentByForm、resJsonUniqueComponentByFormではなく、afterResJsonSingleComponentByForm、afterResJsonUniqueComponentByFormにすると、ボディ部を置換ではなく、第一引数の直後に追加します


次ページコンポーネントのviewをサーバーから受け取る

目次