Do You PHP はてブロ

Do You PHPはてなからはてブロに移動しました

JsRenderチュートリアル - 他のテンプレートを読み込む際に変数を渡す

JavaScript製でjQuery非依存なテンプレートエンジンであるJsRender/JsViewsを使ったチュートリアルを書いてみようと思います。
以前に書いたエントリJsRender入門 - Do You PHP はてなも参照してください。

今回やること

他のテンプレートを読み込む際に変数を渡す

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<div id="result"></div>

<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="http://www.jsviews.com/download/jsviews.min.js" type="text/javascript"></script>
<script type="text/javascript">
// テンプレートのinclude - 変数を渡す
$(function() {
    // 表示するデータ(オブジェクト)
    var fruits = { name: "りんご", num: 3 };

    // テンプレートに変数fruitsを渡し、レンダリング結果を表示
    $('#result').html(
        $('#template').render(fruits)
    );
});
</script>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <p>{{>name}}{{>num}}個あります</p>
    {{include tmpl="#template_child" ~item_name=name ~item_num=num/}}
</script>
<script id="template_child" type="text/x-jsrender">
    <p>template_childです</p>
    <p>{{>~item_name}}{{>~item_num}}個あります</p>
</script>
</body>
</html>

説明

他のテンプレートをincludeする際に現在のコンテキストの変数を明示的に渡すことができます。この場合、書式は次のようになります。

~[子テンプレートでの変数名]=[現在のコンテキストでの変数名]

一方、子テンプレートでは

~[子テンプレートでの変数名]

で値を参照できます。
コード例の場合、「name」「num」という変数の値を、子テンプレートでの変数「item_name」「item_num」として参照できるようにしています。

    {{include tmpl="#template_child" ~item_name=name ~item_num=num/}}
            :
    <p>{{>~item_name}}が{{>~item_num}}個あります</p>

JSFiddleで動作を見る