ajaxで取得したjsonをlodash製テンプレートに突っ込む

仕様

jsonの情報をテンプレートに突っ込んで、回数分DOMを生成したい。

HTML

データ属性を付けた<div>内にloading.gifを入れておく。
入れとかなくても問題は無い。でもクルクルしてた方が格好いいと思う。

htnl

<div data-target-list="list">
    <img src="img/loading.gif">
</div>

JSON

JSON

[
  {
    "title": "kuma",
    "url": "http://kuma.com",
    "img": "kuma.png",
  },
  {
    "title": "tama",
    "url": "http://tama.com",
    "img": "tama.png",
  },
  {
    "title": "kiso",
    "url": "http://kiso.com",
    "img": "kiso.png",
  },
]

JS

1. ajaxでjsonを取得。
2. ajaxはdeferredオブジェクトを持っているので、宣言なしで.doneできる。
3. lodashの_.templateでテンプレートを変数に格納。
4. loading.gifを隠す。
5. forで回して、テンプレートにjsonの情報を突っ込みつつ、DOM描画。

という流れ。

javascript

var list = function(){
    var $target = $('[data-target-list]');
    $.ajax({
        type: 'get',
        url: 'data/list.json',
        dataType: 'json'
    })
    .done(function(data){
        var temp = _.template(
            '<div class="primaryBox">' +
                '<a href="<%= url %>">' +
                    '<%= title %>' +
                '</a>' +
                '<img src="<%= img %>">' +
            '</div>'
        );
        $('.loading').css('display','none');
        for (var i=0; i < data.length; i++){
            $target.append(temp(data[i]));
        }
    });
};
$(function(){
    list();
});