ｊQuery 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>
それを配列分繰り返します。
もう他のを試さなくても、これで十分すぎました。
