LoginSignup
11

More than 5 years have passed since last update.

JsRenderの基本的な使い方

Last updated at Posted at 2018-06-23

はじめに

htmlのテンプレートエンジンとしてjQuery Templatesを使用していたが、JSPでは使えなかった。
回避策を紹介しているサイトもあったが、そもそも現在はjQuery Templatesの開発がストップしているということで、後継ライブラリであるJsRenderに切り替えてみた。

6/23 追記
続きを書きました。
6/23 追記ここまで

導入

jsrender.jsをロードするだけでOK。下記では公式のサンプルに従ってWebから直接ロード。
jQuery非依存だがjQueryのプラグインとしても動作するので今回はjQueryと一緒に使う。

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//www.jsviews.com/download/jsrender.js"></script>

使用方法

基礎

html側の<script type="text/x-jsrender>...</script>内に定義したテンプレートとテンプレートを挿入する親要素を記述する。
なお、変数をバインドする部分は{{:変数名}}と記述する。

<!-- 格納先 -->
<ul id="ul1"></ul>

<!-- テンプレート -->
<script id="tmpl1" type="text/x-jsrender">
  <li>{{:id}} - {{:name}}</li>
</script>

JavaScript側では
1. テンプレートのロードする

var $tmpl1 = $.templates("#tmpl1"); // -> JsRenderのインスタンス生成

または

var $tmpl1 = $("#tmpl1"); // -> jQueryのインスタンス生成
  1. データをバインドしたhtml部品の生成する(上記どちらのインスタンスでも同じ記述になる)
var data1 = {id:"001", name:"hoge"};
var dataHtml = $tmpl1.render(data1); // -> html部品(文字列)の生成
  1. DOMへ追加(以下どちらもjQueryの機能を利用)
$("#ul1").html(dataHtml);  // -> #ul1の内容をdataHtmlに差し替え

または

$("#ul1").append(dataHtml);  // -> #ul1の末尾にdataHtmlを追加

各関数で何が返却されるのかを確認するために細かく分けたが、再利用する必要がなければ以下のように1行で記述すればよい。

$("#ul1").append($("#tmpl1").render(data1));

tmpl1.png

基本的な使用方法

公式のAPIドキュメントからいくつか抜粋する。

オブジェクト配列データへのテンプレート適用

「基礎」の項では単独のオブジェクトをテンプレートに適用したが、1データ分のテンプレートに対してオブジェクト配列を投入した場合は自動でイテレーションされる。

また、変数の代わりに#indexを指定すると配列のインデックスが取得できる。

<ul id="ul2"></ul>
<script id="tmpl2" type="text/x-jsrender">
  <li>[{{:#index}}]:{{:id}}/{{:name}}</li>
</script>
var data2 = [
              {id:"001", name:"hoge"},
              {id:"002", name:"foo"},
              {id:"003", name:"bar"},
             ];
$("#ul2").append($("#tmpl2").render(data2));

tmpl2.png

文字列配列データへのテンプレート適用

文字列配列の場合は変数として#dataを指定することで取得できる。

<ul id="ul3"></ul>
<script id="tmpl3" type="text/x-jsrender">
  <li>[{{:#index}}] - {{:#data}}</li>
</script>
var data3 = ["one", "two", "three"];
$("#ul3").append($("#tmpl3").render(data3));

tmpl3.png

テンプレート内でのイテレーション

テンプレート内でイテレーションする場合は
{{for 配列}}...{{/for}}
という構文を使用する。
変数や#index#dataはすべてイテレーション中のオブジェクトでの値になる。
(以下の例で3行目の{{:id}}と6行目の{{:id}}とでバインドされる値が異なることに注意)

<div id="div4"></div>
<script id="tmpl4" type="text/x-jsrender">
  <div>{{:id}}</div>
  <ol>
    {{for ary1}}
      <li>[{{:#index}}]:{{:id}}/{{:name}}</li>
    {{/for}}
  </ol>
  <ol>
    {{for ary2}}
      <li>[{{:#index}}] - {{:#data}}</li>
    {{/for}}
  </ol>
</script>
var data4 = {
            id:"12345",
            ary1:data2,
            ary2:data3
    };
    $("#div4").append($("#tmpl4").render(data4));

tmpl4.png

テンプレート内での条件分岐

テンプレート内で条件分岐を入れる場合は
{{if 条件}}...{{else 条件}}...{{else}}...{{/if}}
という構文を使用する。(「elseif」ではないので注意)
下記例の通り、条件には簡単な計算や比較演算を入れることも可能。

<ul id="ul5"></ul>
<script id="tmpl5" type="text/x-jsrender">
  <li>
    {{:#data}} :
    {{if #data % 3 == 0}}
      3x
    {{else #data % 3 == 1}}
      3x+1
    {{else}}
      3x+2
    {{/if}}
  </li>
</script>
var data5 = [19, 86, 12, 25];
$("#ul5").append($("#tmpl5").render(data5));

tmpl5.png

htmlタグを適用するバインドとエスケープするバインド

これまでの例ではすべて変数のバインドに{{:変数}}という記述をしてきたが{{>変数}}という記述も可能である。

* {{:変数}}: 変数の値をhtml部品としてバインドする
* {{>変数}}: 変数の値をすべて文字列にエスケープしてバインドする

<ul id="ul6"></ul>
<script id="tmpl6_1" type="text/x-jsrender">
  <li>{{:id}} - {{:name}}</li>
</script>
<script id="tmpl6_2" type="text/x-jsrender">
  <li>{{>id}} - {{>name}}</li>
</script>
var data6 = {id:"<strong>001</strong>", name:"<del>hoge</del>foo"};
$("#ul6").append($("#tmpl6_1").render(data6));
$("#ul6").append($("#tmpl6_2").render(data6));

tmpl6.png

参考サイト

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11