【JS】vol. 3/3 データ表示（テンプレートエンジン）〜Chapter4 ブレイクスルーJavaScript フロントエンジニアとして越えるべき5つの壁〜

なんだか急に難しくなった気がするｗ
多分基本をちゃんと理解していないからだと思うのでここはすっとメモしてまたChapter1から整理してみます。

テンプレートエンジンとは

テンプレートとデータを合体させて文字列を作る仕組みのこと。
いろんなライブラリがあるが、Underscore.jsでも実現できるためここではそれを使う。

ポイント
Underscore.jsの場合は変数展開するところを<%= %>で囲む。
_.template()メソッドでHTMLをテンプレート化する。
HTML部分を別ファイルにしておくことをクライアントテンプレートと呼ぶ。

例
html(クライアントテンプレート)

<script type="text/template" id="template">
  <div class="profile">
    <div class="name">
      <p class="first"><%= name.first %></p>
      <p class="last"><%= name.last %></p>
    </div>
    <p class="age">RIP</p>
  </div>
</script>

JS

var data = {
    name: {
        first:"Steve",
        last: "Jobs"
    },
    age: "RIP"
};

var compiled = _.template(html);
compiled(data);

結果

  <div class="profile">
    <div class="name">
      <p class="first">Steve</p>
      <p class="last">Jobs</p>
    </div>
    <p class="age">RIP</p>
  </div>

また、クライアントテンプレートはループもできる
html

<script type="text/template" id="template">
    <ul>
        <% _.each(data.member, function(e,i) { %>
            <li><%= e %></li>
        <% }); %>
</script>

JS

var data = {
    member: [
        "Alice",
        "Bob"
    ]
};

var compiled = _.template( $("#template").html() );
compiled(data);

結果

<ul>
  <li>Alice</li>
  <li>Bob</li>
</ul>

データ表示の実装

html

      <script type="text/template" data-template="item">
        <% _.each(list, function (e, i) { %>
          <tr>
            <th><%= e.id %></th>
            <td><%= e.name %></td>
            <td><%= e.age %></td>
            <td><%= e.group %></td>
          </tr>
        <% }); %>
      </script>

JS

  function App(url) {                                                           
    this.template = _.template($('[data-template="item"]').html());
    this.bindEvents();
    var self = this;
    this.fetch(url).then(function(data) {
      self.data = data;
      self.render(self.data.list);
    }, function(e) {
      console.error("データの取得に失敗しました");
    });
  }

省略

  App.prototype.render = function(data) {
    var html = this.template({
      list: data
    });
    $(".table tbody").html(html);
  };

ちゃんとわかったら解説コメントつけます。。