Do You PHP はてブロ

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

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

jsviews

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

今回やること

JsRenderを使って、変数に代入した文字列を表示する

コード

<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">
$(function() {
    // 表示するデータ
    var greet = 'Hello';

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

<!-- テンプレート -->
<script id="template" type="text/x-jsrender">
    {{!-- 渡されたデータは#dataで参照できる --}}
    <p>{{>#data}}, World !!</p>
</script>
</body>
</html>

説明

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

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

JsRenderしか使用しないのであれば、JsViews本家からjsrender.js(もしくはjsrender.min.js)をダウンロードして使用してもOKです。今回はJsRender、JsObservable、JsViewsが1ファイルにまとまったjsviews.min.jsを使用しています。
また、jQueryも読み込んでいますが、JsRender内では使用されていません。

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

type属性の値が"text/x-jsrender"であるscriptタグ内に記述します。渡された値は、テンプレート内で

{{>#data}}

で参照できます。
なお、テンプレートはHTMLコンテンツだけでなく、通常のテキストやXML、JSONも可能です。

3. JavaScript内で表示したい値を用意する

今回は、結果を

div#result

に表示することにしています。

4. JsRenderが提供しているrenderメソッドの引数として表示したい値を渡してレンダリングする

JavaScriptコード内にある

        $('#template').render(greet)

がこれに相当します。セレクタでテンプレートが記述されたscriptタグを指定し、そのrenderメソッドを呼び出します。

5. レンダリング結果を任意の位置に追加する

div#resultのHTMLをレンダリングした値に置き換えます。

    $('#result').html(
        $('#template').render(greet)
    );

JSFiddleで動作を見る

参照