jQuery Templates テンプレートエンジン の使い方
サーバ側でhtmlまで生成していたのですが、JSONデータのみにして軽量化したいのですが、
クライアント側でDOM組み立てる処理を書くのはちょっとやってられないので、テンプレートエンジンを探していました。
JSテンプレートエンジンについてググってみたところ、さまざまなものがあるようですが、
jQueryでもプラグインがあるようなので、手始めにこれでやってみました。
本家:jQuery - Templates
参考:jQuery公式のテンプレートplugin 「jQuery Templates」
- テンプレート(html側)
<ul id="movieList"></ul> <script id="movieTemplate" type="text/x-jquery-tmpl"> <li><b>${Name}</b> (${ReleaseYear})</li> </script>
- js
var movies = [ { Name: "The Red Violin", ReleaseYear: "1998" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999" }, { Name: "The Inheritance", ReleaseYear: "1976" } ]; //テンプレートから生成したDOMを対象にappendします $( "#movieTemplate").tmpl(movies).appendTo( "#movieList" )
おー、見たまんま動きます。
${}がJSONのプロパティと置き換わります。
{hoge:"ほげ"} <span>${hoge}<span> ↓ <span>ほげ<span>
それを配列分繰り返します。
もう他のを試さなくても、これで十分すぎました。