Do You PHP はてブロ

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

JsViewsチュートリアル - まずはHello World

jsviews

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

今回やること

JsViewsでテキストボックスに入力されたメッセージを表示する

コード

<html>
<body>

<!-- レンダリング結果を表示するスペース -->
<p>JsRender</p>
<p>テキストボックスに入力しても表示されたデータは更新されない</p>
<div id="result_render"></div>
<p>JsViews</p>
<p>テキストボックスに入力すると表示されたデータが更新される</p>
<div id="result_link"></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を渡し、
    // レンダリング結果を表示
    $('#result_render').html($.render.linkTemplate(message));

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    {{!-- "^"(キャレット/サーカムフレックス)が付いていることに注意 --}}
    <p>{^{>greet}}</p>

    <div>
        <p>triggerなし</p>
        {{!-- data-link属性に注目！ --}}
        <input type="text" data-link="greet"/>
    </div>

    <div>
        <p>trigger=true</p>
        {{!-- data-link属性の"trigger=true"に注目！ --}}
        <input type="text" data-link="greet trigger=true"/>
    </div>
</script>
</body>
</html>

説明

JsViewsは単純なテンプレートエンジンではなく、

テンプレートに渡した値と表示された値が同期(リンク)されている

という特徴があります。
上のコード例は、テンプレートとリンクさせた変数をテキストボックスの値とし、その値を表示させるサンプルになります。JSFiddleで動作を見ると、

  • テキストボックスの値を変更してフォーカスを外す(blur)
  • テキストボックスの値を変更したタイミング

と表示されている値が変わる2種類があることが確認できると思います。

JsViewsを使用する際の基本的な流れはJsRenderの流れと似ており、以下のようになります。

1. JsViewsファイルを読み込む

ここはJsRenderの時と同じです。

2. テンプレートを用意する

基本的にはJsRenderと同じなのですが、well-formedである必要があります。ここで言うwell-formedとは、

HTML要素だけがwell-formedと言うわけではなく、HTML要素とテンプレートのタグの組み合わせでwell-formed

ということです。したがって、JsViewsのテンプレートでは、属性の値にifタグなどを使うことはできません。この場合、別途用意された方法を使用する必要があります。

さて、リンクされたデータを表示する方法についてですが、大きく2種類あります。
1つ目はJsRenderで使っていた書式に"^"(キャレット/サーカムフレックス)が付くようになります。例えば、上のコード例でgreetという変数を表示する場合、

{^{>greet}}

と記述します。
もう1つは、HTMLタグに"data-link"という特別な属性をつけることで、そのタグの値を変数の値にする、というものです。コード例では以下のように記述しています。

    <input type="text" data-link="greet">

ここではとりあえず、フォーム要素(inputタグやselectタグなど)の場合はdata-link属性の値に変数名を指定すると値がリンクされる、と覚えておいてください。
また、data-link属性の値に変数名の他に"trigger=true"を指定すると、入力したタイミングでデータが更新されるようになります。

    <input type="text" data-link="greet trigger=true">
3. JavaScript内で表示したい値を用意する

コード例では、比較のために

としています。

4. JsViewsが提供しているlinkメソッドの引数としてリンクさせたい変数を渡してテンプレートとリンクする

JavaScriptコード内にある

    $.link.linkTemplate('#result_link', message);

がこれに相当します。いきなり名前付きテンプレートを使っていますが、名前付きテンプレートを使わない場合は

    $.templates([テンプレートへのセレクタ]).link([表示スペースへのセレクタ], [リンクする変数]);

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

    $.templates('#template').link('#result_link', message);

となります。

JSFiddleで動作を見る

参照