ICanHazでテンプレートを別ファイルにする

システムの開発前、大まかなイメージを共有したいときには静的なHTMLファイルでポンチ絵を作成します。

HTMLをゴリゴリ作成していくと同じ記述がいたるところに現われて、作るのも気が滅入りますし修正するとなると辞めたくなります。

そこでなにかテンプレートエンジンを使いたいのですが、気軽に使えるものがないかと長いあいだ探していたところ話題のICanHazがアンテナにかかりました。

↓のようにscriptタグにHTMLのテンプレートを書いて、

<script id="user" type="text/html">
  <li>
    <p class="name">Hello I'm {{ name }}</p>
    <p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
  </li>
</script>

JavaScriptで呼び出せばいいだけのお手軽さがステキです。


＜～中略～＞


せっかくのテンプレートなので、ファイル内ではなくて外部ファイルにして部品を共有できるようにしておきたいところです。

そこで、

<script type='text/html' src='someTemplate.html'></script>

としてみたのですが、反応がありません。

外部ファイルを使えるようにする試みはあるようなのですが、手っ取り早く使いたいので、↓のようにjQueryのajax関数がローカルファイルにも対応しているのを利用してみました。

$(document).ready(function() {
  $.ajax({
    type: 'GET',
    url: 'someTemplate.html',
    async: false,
    success: function(templateString) {ich.addTemplate('some', templateString);}
  });
  $('#someWhere').append(ich.some(data));
});

便利に使えそうです。Google Chromeで使うときには、パラメータ

-allow-file-access-from-files

を付けて起動しておく必要があります。