jQuery と ajax と Underscore.JS のテンプレートで json ファイルを取ってデータを表示してみるメモ

表示確認はFirefox26。
chrome 使う場合は下記のように -allow-file-access-from-files オプション付けて起動する

【小ネタ】Chromeのローカルセキュリティポリシーの回避｜ Developers.IO

open -a Google\ Chrome --args -allow-file-access-from-files

index.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8"/>
        <title>ajax+json</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
        <script>
  $(function () {
    $.ajax({
      dataType: "json",
      url: "foo.json",
      success: function(data) {
        // バインドするオブジェクト定義
        var users = data.users;
        // テンプレートを取得
        var template = $("#external-template").text();
        // テンプレートを定義
        var compiled = _.map(users, function(user) {
          return _.template(template, user);
        });
        // テンプレート適用
        $("#show-template").html(compiled);
      }
    });
  });
        </script>
    </head>
    <body>

        <!-- テンプレート適用されたもの表示 -->
        <ul id="show-template"></ul>

        <!-- テンプレート外部定義-->
        <script type="text/template" id="external-template">
            <li><%= name %>（結成：<%= since %>年）</li>
        </script>
    </body>
</html>

foo.json

{
  "users": [
    {
      "name": "千鳥",
      "since": 2000
    },{
      "name": "ウーマンラッシュアワー",
      "since": 2008
    },{
      "name": "NONSTYLE",
      "since": 2000
    }
  ]
}