jquery.tmpl.jsの使い方まとめ

jquery.tmpl.jsが便利だったのでまとめ。
今、使うならangularjs　vuejsのほうがいいとおもいます。
案件でこちらを使っていたのでそれをそのまま踏襲する流れで調べたことをまとめておきます。

■基本的な使い方

・JS側

<script src="/js/lib/jquery.tmpl.min.js"></script>
<script id="template" type="text/x-jquery-tmpl">
${name}：${hoge}
</script>
<script>
  var data = {name:'text', hoge:'hello world.'};
  $('#template').tmpl(data).appendTo("#contents");
</script>

・HTML側

<div id="contents">
</div>

#contentsのdivに対してテンプレート内で置換したものを出力します。
出力は以下のようなイメージです。

<div id="contents">
text：hello world.
</div>

■テンプレートを別のファイルとして処理
テンプレートファイルは基本外部に出しておいてやったほうが見た目上も管理上もいいので
テンプレートファイルを別ファイルとして扱う方法をご紹介いたします。

・js側の記述

<script src="/js/lib/jquery.tmpl.min.js"></script>

<script type="text/javascript">
  //getでテンプレートを取得しておく
  var tmplate;
  $.get("tmpl.htm", function(data) { template = data; });

  //テンプレート用オブジェクト作成
  var obj = new Object();

  obj = {
    list : [
      { 'name' : 'aaa', 'no' : 1 },
      { 'name' : 'bbb', 'no' : 2 },
      { 'name' : 'ccc', 'no' : 3 }
    ]
  }
  //置換処理
  $.tmpl(template, obj).appendTo("#box");
</script>

・tmpl.htm側の記述

{{if list != ''}}
  <ul>{{each list}}
    <li{{if $index == 1}} class="first"{{else($index + 1 == list.length)}} class="last"{{/if}}>${no}:${name}</li>{{/each}}
  </ul>
{{else}}
  listがないよ！
{{/if}}

・js側説明

$.get("tmpl.htm",function(data){template = data;});でテンプレートの内容を取得してきます。
dataに取得してきてtemplate変数に取得してきたコードを入れておきます。

var objでテンプレートでの変換に使うオブジェクトを生成しておきます。
今回はテンプレート上でループも再現するためにオブジェクトの中に配列を作成してます。

$.tmpl(template,obj).appendTo("#box");
idがboxの中にtemplateの中をobjを元に書き換えたものを追加します。
※appendTo以外つかえないのでappendToのところをhtmlなどに変えてしまうと動作しません。

・tmpl.htm側説明

　ifの書き方

if文を記述する際は{{if 条件式}}～～{{else 条件式}}～～{{/if}}
条件式はいろいろと記述可能です。
&&や||など基本的にはjsと同じような感覚で使っていけるようです。

　ループの書き方（each文）

each文の使用が可能です。
js側でlistに配列をつくってあります。
ただし、jsのように配列でない場合などにエラーになります。
なので、{{if list != ''}}としています。
{{each list}}～～～{{/each}}
ループ中の現在の回数が$indexで取得可能です。
配列の要素数はxxx.lengthで取得可能です。
jsと同じ感覚です。

　エスケープ処理

jquery.tmpl.jsでは自動でhtmlエスケープがかかるようになっています。
エスケープをかけたくない場合には{{html xxx}}の形でエスケープを無効にして出力が可能です。