jQueryにテンプレートシステムを導入するjQuery-templateの使い方

#背景
jQueryでよくやるやつだと、$.getJSONでデータ取って、HTMLに値をズコズコ突っ込んでいくやつですね。

$.getJSON('hoge.com',function(json){
	$("#name").text(json.data.name);
	$("#address").text(json.data.address);
});

#テンプレート化したいときも

リスト表示みたいに数が未定で、１つテンプレート用意して
それを複製したいときなどもありますね。
こんな感じですかね―。
ちょっと苦しい。

var template = '' +
'<div>' +
  '<div id="name"></div>' +
  '<div id="address"></div>' +
'</div>';

$.getJSON('hoge.com',function(json){
	$(template).find('#name').text(json.data.name);
	$(template).find('#address').text(json.data.address);
});

#そんなときにjQuery-Templateです。

上記からcloneしたら
jquery.loadTemplate-x.x.x.min.js
をjsフォルダに突っ込んでHTMLに読み込んでください。

#基本の使い方

###まずはテンプレートとなるHTMLを用意します。

user.html

<div>
  <div data-content="name"></div>
  <div data-content="address"></div>
</div>

地味に嬉しいのが、jQueryなのにidやclassを使わないで、data-contentを使って変数を入れる所。これだったら、デザイナーさんと作業が切り離せますね。

###getJSONから呼び出します。

$.getJSON('hoge.com',function(json){
	$("#area_user").loadTemplate(
	  "js/templates/user.html",
	  {
        "name" : json.data.name,
        "address" : json.data.address
    });
});
// area_userはテンプレートをはめ込む親divです。

JSONで変数を入れます。簡単です。

これだと上書きなので、追記モードの時はこんな感じ。

追記の時

$.getJSON('hoge.com',function(json){
	$("#area_user").loadTemplate(
	  "js/templates/user.html",
	  {
        "name" : json.data.name,
        "address" : json.data.address
      },
      {append:true}
   );
});

第3引数にappend:trueを入れることにより、#area_userへの追記モードになります。

思いがけず、結構いい感じにAJAX部分とテンプレート部分を切り離すことができました。
これでコードが少しキレイになります。