2015年5月25日月曜日

Mustache互換のJavaScriptテンプレートエンジン「Handlebars.js」

Mustache互換のJavaScriptテンプレートエンジン「Handlebars.js」を組み込んでみました。Mustacheに慣れた方なら、すぐに利用できるようになると思います。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
  <h1>title : {{title}}</h1>
  <p>body : {{{body}}}</p>
  {{#each people}}
    <li>people : {{firstName}} {{lastName}}</li>
  {{/each}}
</script>

<script>
$(function(){
  var source = $("#entry-template").html();
  var template = Handlebars.compile(source);
  var context = {
          title: "タイトル", 
          body: "マイクのテスト中です。", 
          people: [
            {firstName: "Yehuda", lastName: "Katz"},
            {firstName: "Carl", lastName: "Lerche"},
            {firstName: "Alan", lastName: "Johnson"}
          ]
        };
  var strhtml = template(context);
  $('#output').html(strhtml);
});
</script>

<div id="output"></div>

実際に設定してみたサイトがこちら



参考サイト
wycats/handlebars.js(GitHub)

0 件のコメント:

コメントを投稿