[Javascript]Javascriptでテンプレートエンジンを作ってみた

前回のエントリがブックマークしてくれた人が多かったので嬉しくなって作ってみました。

テンプレートエンジンはAjaxPagesを前は使ってましたが、サーバのレスポンスが悪いとテンプレートをロードする前に表示しようとしてエラったので、自分好みのテンプレートエンジンを作りました。

特徴

  • Javascriptでテンプレートが使える
  • 外部ファイルが使える(タイムアウトも設定できる。)
  • 文字列をテンプレートとして使える
  • JSPっぽい書き方が出来る
  • テンプレートが展開された内容が確認できる！デバック簡単！(かもしれない)
  • ライセンスがMITで使い放題

サンプルとダウンロード

使い方

jsTemplate('sample01.jshtml')
  
// 読み込み エラーがあれば通知
.load(function(e){
  alert('error  '+e);
})

// レンダリング
.rendering(function(render){
  var str = render({aa:'AA'});// 値を渡す
  $('stage1').innerHTML=str;
});
  1. jsTemplateで外部ファイルか文字列を渡す
  2. loadすると指定された外部ファイルを読みにいく(loadしない場合は指定された文字列がテンプレートとして解釈される)
  3. renderingでコールバックで渡された引数(render関数)を実行するとテンプレートがレンダリングされた文字列が取れる。
  • テンプレートの表記方法
    • <% 〜 %>部分はJavascriptとして解釈されます。
    • <%="" %>でリテラルを表示できます。
    • <%=context.XXX %>でrenderingのコールバックのrender関数で渡した値を取得できる。

確認したブラウザ