gulp-jst-concatでテンプレートを分割

作戦

1. gulp-jst-concatでビルド時にtemplateをjsファイルにコンパイルする．
2. テンプレートのネストもしたい

1.テンプレートを使う

show_name.html

<p>
  <%- name %>
</p>

上記のファイルをgulp-jst-concatでビルドするとjst.jsというファイルが生成される．これを読み込むとJSTというグルーバル変数経由でHTMLを生成する関数を取り出せる．

script.js

var data = { 'name': '舞川あや' };
var template = JST['show_name']; //バインドするデータを引数にとる関数
var compiledDOM = $(template(data));

2.テンプレートのネスト

テンプレート中で__include('template_name')という関数でテンプレートを読み込めるようにする．

<%= __include('part.html') %>

テンプレートのコンパイルを以下のように工夫すればよい．

var compile = function(name, data){
  data.__include = function(name){
     return compile(name);
  };
  return JST[name](data);
};