Laddy in

Programming & Technology!!

NEW ARTICLE
windows11拡張機能で画像文字読み込み

魅惑のjavascriptテンプレーエンジンjsrenderを使う




javascriptテンプレートエンジンは、Mustacheやunderscore.jsなどが有名どころですが、
jsrenderを使ってみたところさっくりと、とても便利に利用できたので紹介します。

jsviews, jsrender

目次

シンプルな実装コード


<html>
<body>
<table id="user_list" border="1">
<thead>
  <tr><th>番号</th><th>ユーザ名</th><th>年齢</th><th>アカウント状態</th></tr>
</thead>
<tbody>
</tbody>
</table>

<script id="table_template" type="text/x-jsrender">
<tr>
  <td>{{>id}}</td>
  <td>{{>name}}</td>
  <td>{{>age}}</td>
  <td>
    {{if account_status==0 tmpl="凍結中"}}
    {{else tmpl="利用中"}}
    {{/if}}</td>
  </tr>
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jsviews.com/download/jsrender.js"></script>

<script type="text/javascript">
$(function(){
    var userlist = [
        {"id":"1","name":"hogehoge1","age":"21","account_status":1},
        {"id":"2","name":"hogehoge2","age":"26","account_status":1},
        {"id":"3","name":"hogehoge3","age":"13","account_status":0},
        {"id":"4","name":"hogehoge4","age":"5","account_status":0},
        {"id":"5","name":"hogehoge5","age":"83","account_status":1},
        {"id":"6","name":"hogehoge6","age":"42","account_status":1},
    ];

    $("#user_list tbody").html(
       $("#table_template").render(userlist)
    );
});
</script>
</body>
</html>




解説

tbodyへObjectの中身をjsrenderを利用して表示しています。

renderしたデータを挿入するのにjqueryを利用していますので、
従来のセレクタを利用して複数箇所に表示させることができます。

違和感があるのが<script id="table_template" type="text/x-jsrender">の部分かと思われます。
ここのscriptタグの中はjsrenderのテンプレートになりますので、
この中では変数名と条件式、forやincludeや1階層下の要素の表示などを利用することができます。

このへんはhttp://www.jsviews.com/#jsrapi本家のドキュメントへ

ざっくりとしたWebアプリへの利用方法

  • ajaxでリクエストを出す
  • リクエストを受けたphpが配列を生成しjson_encode()関数にてjsonを返す
  • 返ってきたjsonデータをjsrenderのテンプレートに流し込む

テンプレートを利用する際にテンプレートの中で条件式も利用できるので、
phpでデータベースから適当に引っ張ってきたデータもブラウザ側に処理を任せることができそうです。

//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js