JavaScript フレームワーク fairy support js
目次
テンプレート

String

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.loadStringTemplate(this.obj, this.template(), {'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));
    }

    sample2_input(event) {
        this.obj2.textContent = event.target.value;
    }

    success(nodeList) {
        alert("success");
    }

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

    template() {
        return `
            <div>--data-text--</div>
            <div data-text='v.key1'></div>
            <div data-text='v.key1' data-tag='hidden'></div>

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

            <div>--script--</div>
            <script data-load-only='true'>
                l.var = 1 + 2;
            </script>
            <div data-text='l.var'></div>

            <div>--data-attr--</div>
            <script data-load-only='true'>
                l.attr = {"style": "color: white; background-color: black;", "title" : "sample"};
            </script>
            <div data-attr='l.attr'>data-attr</div>
            <div data-attr='{"style": "color: white; background-color: black;", "title" : "sample"}'>data-attr</div>

            <div>--data-prop--</div>
            <script data-load-only='true'>
                l.prop = {"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"};
            </script>
            <div data-prop='l.prop'>data-prop</div>
            <div data-prop='{"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"}'>data-prop</div>

            <div>--data-if--</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-for--</div>
            <div data-for-start='l.i = 0' data-for-end='l.i < 10' data-for-step='l.i++'>
                <span data-if='l.i === 3' data-continue='1' data-tag='hidden'></span>
                <span data-if='l.i === 6' data-break='1' data-tag='hidden'></span>
                <div data-text='l.i'></div>
            </div>

            <div>--data-foreach--</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-while--</div>
            <script data-load-only='true'>
                l.whileCount = -1;
            </script>
            <div data-while='l.whileCount < 8'>
                <script data-load-only='true'>
                    l.whileCount++;
                </script>
                <div data-if='l.whileCount === 3' data-continue='1' data-tag='hidden'></div>
                <div data-if='l.whileCount === 6' data-break='1' data-tag='hidden'></div>
                <div data-text='l.whileCount'></div>
            </div>

            <input data-name='sample2' type='text'>
            <div data-obj='obj2'></div>
        `;
    }

}

実行してsampleボタンをクリックしてみましょう
index.jsのtemplateメソッドの戻り値に、$f.loadStringTemplateの第三引数の値が埋め込まれて出力されます
loadStringTemplateメソッドは、第二引数に渡された文字列に、第三引数に渡された値を埋め込んで、第一引数のボディ部を置換するメソッドです
戻り値はPromiseです。テンプレートがwebページに埋め込まれ、新たに埋め込まれたテンプレートがjsと結びつけできたらresolveされます
resolveにはloadされたテンプレートの最上位階層のnodeの配列が渡されます
loadStringTemplateメソッドの第二引数をつくっているindex.jsのtemplateメソッドを見てみましょう
ただのテンプレートリテラルを返しています
data-ではじまる属性をタグにつけることで、loadStringTemplateに渡された第三引数をいろいろな形で埋め込むことができます
loadStringTemplateメソッドの第二引数に渡す文字列では、loadStringTemplateメソッドの第三引数をvという変数名で使うことができます。これはこのフレームワークの規則です
したがって、<div data-text='v.key1'></div>は、loadStringTemplateメソッドの第三引数のkey1要素をこのタグのボディ部にHTMLエスケープして出力することになります
data-tag='hidden'はこのタグのボディ部だけを出力して、タグは出力しません
data-htmlは与えられた値をhtmlエスケープせずに出力します
scriptタグにdata-load-only='true'をつけるとscriptタグの中をJavaScriptとして解釈して、そこで実行します。このscriptタグは削除されます
テンプレート内ではlというローカル変数を使用できます。lはオブジェクトです。これはこのフレームワークの規則です
data-attrは与えられた値をsetAttributeを使って属性の値を設定します
data-propは与えられた値を=演算子を使ってDOMに設定します。ネストされたオブジェクトを指定可能です
data-ifは与えられた値がtrueの場合、タグを出力します
data-elseifは前のdata-ifの値がfalseの場合、実行され、与えられた値がtrueの場合、タグを出力します
data-elseは前のdata-if、data-elseifの値がfalseの場合、タグを出力します
data-for-start、data-for-end、data-for-step、data-for-skipはセットで使います。data-for-startが最初に評価され、data-for-endがtrueの間は繰り返しタグが出力されます。タグが出力されるたびにdata-for-stepが評価されます。data-for-skipがtrueの場合、繰り返し処理をしません。
data-continueはループの先頭に戻ります。設定する値は何個上のループに戻るかを指定します。二重ループの最上位ループ先頭に戻る場合は2を指定します
data-breakはループのから抜けます。設定する値は何個上のループに戻るかを指定します。二重ループの最上位ループ先頭に戻る場合は2を指定します
data-foreach、data-foreach-key、data-foreach-value、data-foreach-skip、data-foreach-endはセットで使います。data-foreachに指定された配列やオブジェクトを繰り返し処理します。data-foreach-keyに指定した文字列がローカル変数lのキーとなり、そこにdata-foreachに指定された配列やオブジェクトのキーが格納されます。data-foreach-valueに指定した文字列がローカル変数lのキーとなり、そこにdata-foreachに指定された配列やオブジェクトの要素値が格納されます。data-foreach-skipがtrueの場合、繰り返し処理をしません。data-foreach-endがtrueの場合、繰り返し処理を終了します。
data-while、data-while-skip、data-while-stepはセットで使います。data-whileは指定された式がtrueの間、タグを繰り返し出力します。data-while-skipがtrueの場合、繰り返し処理をしません。data-while-stepは2回目以降の繰り返し処理の際に実行されます。
data-name、data-obj、data-listなど、jsに結びつく属性があれば、フレームワークによって自動的に結びつけられます
loadStringTemplateではなく、appendLoadStringTemplateにすると、ボディ部を置換ではなく、ボディ部に追加します
loadStringTemplateではなく、beforeLoadStringTemplateにすると、ボディ部を置換ではなく、第一引数の直前に追加します
loadStringTemplateではなく、afterLoadStringTemplateにすると、ボディ部を置換ではなく、第一引数の直後に追加します


テンプレートを別ファイルにする

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.loadTemplate(this.obj, 'tpl', {'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));
    }

    sample2_input(event) {
        this.obj2.textContent = event.target.value;
    }

    success(nodeList) {
        alert("success");
    }

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

}

src/js/templates/tpl.htmlを作成しましょう

tpl.html 

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

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

<div>--script--</div>
<script data-load-only='true'>
    l.var = 1 + 2;
</script>
<div data-text='l.var'></div>

<div>--data-attr--</div>
<script data-load-only='true'>
    l.attr = {"style": "color: white; background-color: black;", "title" : "sample"};
</script>
<div data-attr='l.attr'>data-attr</div>
<div data-attr='{"style": "color: white; background-color: black;", "title" : "sample"}'>data-attr</div>

<div>--data-prop--</div>
<script data-load-only='true'>
    l.prop = {"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"};
</script>
<div data-prop='l.prop'>data-prop</div>
<div data-prop='{"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"}'>data-prop</div>

<div>--data-if--</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-for--</div>
<div data-for-start='l.i = 0' data-for-end='l.i < 10' data-for-step='l.i++'>
    <span data-if='l.i === 3' data-continue='1' data-tag='hidden'></span>
    <span data-if='l.i === 6' data-break='1' data-tag='hidden'></span>
    <div data-text='l.i'></div>
</div>

<div>--data-foreach--</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-while--</div>
<script data-load-only='true'>
    l.whileCount = -1;
</script>
<div data-while='l.whileCount < 8'>
    <script data-load-only='true'>
        l.whileCount++;
    </script>
    <div data-if='l.whileCount === 3' data-continue='1' data-tag='hidden'></div>
    <div data-if='l.whileCount === 6' data-break='1' data-tag='hidden'></div>
    <div data-text='l.whileCount'></div>
</div>

<input data-name='sample2' type='text'>
<div data-obj='obj2'></div>

loadStringTemplateではテンプレートを直接文字列で渡しましたが、loadTemplateを使うとテンプレートを別ファイルにできます
テンプレートはsrc/js/templates配下に拡張子htmlで作成します。これは、このフレームワークの規則です
loadTemplateの第二引数にsrc/js/templates配下のファイル名を与えます
src/js/templates配下にサブディレクトリを作成することもできます。その場合、loadTemplateの第二引数にはピリオド区切りで文字列を渡します
例えば、src/js/templates/sub/tpl.htmlを作成した場合、loadTemplateの第二引数には'sub.tpl'を渡します
loadTemplateではなく、appendLoadTemplateにすると、ボディ部を置換ではなく、ボディ部に追加します
loadTemplateではなく、beforeLoadTemplateにすると、ボディ部を置換ではなく、第一引数の直前に追加します
loadTemplateではなく、afterLoadTemplateにすると、ボディ部を置換ではなく、第一引数の直後に追加します


テンプレートのネスト

例

<script data-load-only='true'>
        l.nestVal = {'key1': '<input type="text">', 'key2': {'val1': 2}, 'key3': {"key1": "str1", "key2": "str2", "key3": "str3", "key4": "str4", "key5": "str5"}};
</script>
<div data-template='tpl2' data-template-variable='l.nestVal'></div>

data-template属性値はloadTemplateの第二引数と同じです
data-template-variable属性値はloadTemplateの第三引数と同じです
data-template、data-template-variable属性が付いたタグの内部にテンプレートがロードされます

テンプレートに渡す変数をサーバーから受け取る。その1

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

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

    constructor() {
    }

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

    sample2_input(event) {
        this.obj2.textContent = event.target.value;
    }

    success(nodeList) {
        alert("success");
    }

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

}

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を返すサーバープログラムを示しました。これがドキュメントルート直下に設置されているとします
loadTemplateではなく、resJsonTemplateを使います
第二引数にsrc/js/templates配下のファイル名を与えます
第三引数にjsonを返すURLを与えます
第四引数にjsonを返すURLに送信するリクエストパラメーターを与えます
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第五引数にtrueを与えます
resJsonTemplateは第三引数で与えられたURLに第四引数に与えられたデータをPOST送信します。そのレスポンスのJSONをテンプレートに渡します
resJsonTemplateではなく、appendResJsonTemplateにすると、ボディ部を置換ではなく、ボディ部に追加します
resJsonTemplateではなく、beforeResJsonTemplateにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resJsonTemplateではなく、afterResJsonTemplateにすると、ボディ部を置換ではなく、第一引数の直後に追加します


テンプレートに渡す変数をサーバーから受け取る。その2

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

index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resJsonTemplateByForm(this.obj, 'tpl', $f.envValue('apiRoot') + '/tpl.php', this.sampleForm)
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }

    sample2_input(event) {
        this.obj2.textContent = event.target.value;
    }

    success(nodeList) {
        alert("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ではresJsonTemplateではなく、resJsonTemplateByFormを使います
第四引数にjsonを返すURLに送信するformオブジェクトを与えます
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第五引数にtrueを与えます
resJsonTemplateByFormは第三引数で与えられたURLに第四引数に与えられたformをPOST送信します。そのレスポンスのJSONをテンプレートに渡します
resJsonTemplateByFormではなく、appendResJsonTemplateByFormにすると、ボディ部を置換ではなく、ボディ部に追加します
resJsonTemplateByFormではなく、beforeResJsonTemplateByFormにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resJsonTemplateByFormではなく、afterResJsonTemplateByFormにすると、ボディ部を置換ではなく、第一引数の直後に追加します


テンプレートをサーバーから受け取る。その1

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

index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {
        $f.resHtmlTemplate(this.obj,
                           $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));
    }

    sample2_input(event) {
        this.obj2.textContent = event.target.value;
    }

    success(nodeList) {
        alert("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を作成し、配置してみましょう

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--</div>
<div data-text='v.key1'></div>
<div data-text='v.key1' data-tag='hidden'></div>

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

<div>--script--</div>
<script data-load-only='true'>
    l.var = 1 + 2;
</script>
<div data-text='l.var'></div>

<div>--data-attr--</div>
<script data-load-only='true'>
    l.attr = {"style": "color: white; background-color: black;", "title" : "sample"};
</script>
<div data-attr='l.attr'>data-attr</div>
<div data-attr='{"style": "color: white; background-color: black;", "title" : "sample"}'>data-attr</div>

<div>--data-prop--</div>
<script data-load-only='true'>
    l.prop = {"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"};
</script>
<div data-prop='l.prop'>data-prop</div>
<div data-prop='{"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"}'>data-prop</div>

<div>--data-if--</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-for--</div>
<div data-for-start='l.i = 0' data-for-end='l.i < 10' data-for-step='l.i++'>
    <span data-if='l.i === 3' data-continue='1' data-tag='hidden'></span>
    <span data-if='l.i === 6' data-break='1' data-tag='hidden'></span>
    <div data-text='l.i'></div>
</div>

<div>--data-foreach--</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-while--</div>
<script data-load-only='true'>
    l.whileCount = -1;
</script>
<div data-while='l.whileCount < 8'>
    <script data-load-only='true'>
        l.whileCount++;
    </script>
    <div data-if='l.whileCount === 3' data-continue='1' data-tag='hidden'></div>
    <div data-if='l.whileCount === 6' data-break='1' data-tag='hidden'></div>
    <div data-text='l.whileCount'></div>
</div>

<input data-name='sample2' type='text'>
<div data-obj='obj2'></div>

resHtmlTemplateを使います
第二引数にテンプレートを返すURLを与えます
第三引数にテンプレートを返すURLに送信するリクエストパラメーターを与えます
第四引数にテンプレート内でvという変数名で使うオブジェクトを渡します
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第五引数にtrueを与えます
resHtmlTemplateは第二引数で与えられたURLに第三引数に与えられたデータをPOST送信します。そのレスポンスをテンプレートにします
resHtmlTemplateではなく、appendResHtmlTemplateにすると、ボディ部を置換ではなく、ボディ部に追加します
resHtmlTemplateではなく、beforeResHtmlTemplateにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resHtmlTemplateではなく、afterResHtmlTemplateにすると、ボディ部を置換ではなく、第一引数の直後に追加します


テンプレートをサーバーから受け取る。その2

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

index.js 
export class Index {

    constructor() {
    }

    sample_click(event) {

        $f.resHtmlTemplateByForm(this.obj,
                                 $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));
    }

    sample2_input(event) {
        this.obj2.textContent = event.target.value;
    }

    success(nodeList) {
        alert("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 htmlspecialchars($_REQUEST['sample_key'], ENT_QUOTES)?></div>


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

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

<div>--script--</div>
<script data-load-only='true'>
    l.var = 1 + 2;
</script>
<div data-text='l.var'></div>

<div>--data-attr--</div>
<script data-load-only='true'>
    l.attr = {"style": "color: white; background-color: black;", "title" : "sample"};
</script>
<div data-attr='l.attr'>data-attr</div>
<div data-attr='{"style": "color: white; background-color: black;", "title" : "sample"}'>data-attr</div>

<div>--data-prop--</div>
<script data-load-only='true'>
    l.prop = {"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"};
</script>
<div data-prop='l.prop'>data-prop</div>
<div data-prop='{"style": {"color" : "white", "backgroundColor": "black"}, "title" : "sample"}'>data-prop</div>

<div>--data-if--</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-for--</div>
<div data-for-start='l.i = 0' data-for-end='l.i < 10' data-for-step='l.i++'>
    <span data-if='l.i === 3' data-continue='1' data-tag='hidden'></span>
    <span data-if='l.i === 6' data-break='1' data-tag='hidden'></span>
    <div data-text='l.i'></div>
</div>

<div>--data-foreach--</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-while--</div>
<script data-load-only='true'>
    l.whileCount = -1;
</script>
<div data-while='l.whileCount < 8'>
    <script data-load-only='true'>
        l.whileCount++;
    </script>
    <div data-if='l.whileCount === 3' data-continue='1' data-tag='hidden'></div>
    <div data-if='l.whileCount === 6' data-break='1' data-tag='hidden'></div>
    <div data-text='l.whileCount'></div>
</div>

<input data-name='sample2' type='text'>
<div data-obj='obj2'></div>

index.htmlにformタグを追加し、data-obj="sampleForm"を付けました
index.jsではresHtmlTemplateではなく、resHtmlTemplateByFormを使います
第三引数にテンプレートを返すURLに送信するformオブジェクトを与えます
第四引数にテンプレート内でvという変数名で使うオブジェクトを渡します
withCredentialsをtrueにしたい場合(cookieを送信したい場合)は第五引数にtrueを与えます
resHtmlTemplateByFormは第二引数で与えられたURLに第三引数に与えられたformをPOST送信します。そのレスポンスをテンプレートとします
resHtmlTemplateByFormではなく、appendResHtmlTemplateByFormにすると、ボディ部を置換ではなく、ボディ部に追加します
resHtmlTemplateByFormではなく、beforeResHtmlTemplateByFormにすると、ボディ部を置換ではなく、第一引数の直前に追加します
resHtmlTemplateByFormではなく、afterResHtmlTemplateByFormにすると、ボディ部を置換ではなく、第一引数の直後に追加します


画面に表示されているDOMをテンプレートとして使う

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

index.js 
export class Index {

    constructor() {
    }

    init() {
        $f.useDomAsTemplate(this.obj, {'key': {'val1': 2}})
        .then(this.success.bind(this))
        .catch(this.error.bind(this));
    }

    success(nodeList) {
        this.obj.style.display = "block";
    }

    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" style="display:none">
        <div data-if='v.key.val1 === 1'>
            v.key.val1 === 1
        </div>
        <div data-elseif='v.key.val1 === 2'>
            v.key.val1 === 2
        </div>
        <div data-else=''>
            else
        </div>
    </div>
</body>
</html>

index.jsではuseDomAsTemplateを使います
第一引数に与えたDOM配下をテンプレートとして扱います
第二引数にテンプレート内でvという変数名で使うオブジェクトを渡します


次ページシングルコンポーネントのイベント処理

目次