Do You PHP はてブロ

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

JsViewsチュートリアル - タグをデータリンクさせる

jsviews

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

今回やること

JsViewsでタグをデータリンクさせた場合の動作を確認する

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<p>テキストボックスに入力すると表示されたデータが更新される</p>
<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">
// タグのリンク
$(function() {
    // 表示するデータ
    var message = {
        greet: 'Hello !'
    };

    // テンプレートに名前(ここでは"linkTemplate")をつけて登録する
    $.templates({
        linkTemplate: "#template"
    });

    // テンプレート"linkTemplate"と変数greetをリンク
//    $.templates('#template').link('#result', message);
    $.link.linkTemplate('#result', message);
});
</script>

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    <div>
        <p>タグにキャレットなし</p>
        <p>{{if greet != 'Hello'}}{^{>greet}}{{/if}}</p>
    </div>
    <div>
        <p>タグにキャレットあり</p>
        {{!-- タグに"^"(キャレット/サーカムフレックス)が付いていることに注意 --}}
        <p>{^{if greet != 'Hello'}}{^{>greet}}{{/if}}</p>
        <div><input type="text" data-link="greet trigger=true"/></div>
    </div>
</script>
</body>
</html>

説明

先日のチュートリアルでは、値を表示する場合に"^"(キャレット/サーカムフレックス)を付けるパターンが出てきましたが、これはifやforなどのタグにも使えます。
書式は値の場合と同様で、

{^{[タグ名] ... }} ... {{/[タグ名]}}

のようになります。具体的には

{^{if ... }}
    ：
{{/if}}

といった具合です。
こうすると、データが更新された場合にタグも再評価され、入力フォームなどに入力された値と連動させることができるようになります。
コード例では、テキストボックスに入力した値が"Hello"と一致した場合は表示しない、というものです。その他の値の場合は、先日のチュートリアルと同様に表示されます。

JSFiddleで動作を見る

参照