Hogan.jsの使い方サンプル

準備

<script type="text/javascript" src="/js/hogan-3.0.1.js"></script>

テンプレート

<script type="text/template" id="template">
{{#Items}}
  <span>{{item}}</span>
{{/Items}}
</script>

処理

ページ読み込み時に初期表示を行っています。

  $(function() {
    Sample.template = Hogan.compile($("#template").html());
    Sample.update();
    });
  })

データ取得・表示用のオブジェクト。

Sample = {
  items: [],      // 表示するデータ
  template: null, // テンプレート格納用
  viewCount: 10,  // 1ページ表示数
  update: function () {
    $.ajax({
      type: "POST",
      url: "sample.php",
      data: { key: "value" }
    }).done(function( res ) {
      Sample.items = res;
      Sample.page(1);
    });
  },
  page: function(num) {
    var showItems = [];
    for (var i = (num - 1) * Sample.viewCount; i < num * Sample.viewCount; i++) {
      if (Sample.items[i]) {
        showItems.push(Sample.items[i]);
      };
    };
    $("#view").html(Sample.template.render({Items:showItems}));
  }
}

ページングはSample.page(ページ数);で行います。

Hogan.js仕様

↓の場合hogeの内容により動作が変わる。

{{#hoge}}
処理
{{/hoge}}

• bool値の場合：if文として機能
• 配列の場合：foreachとして機能

↓の場合、true/falseが反転する。!みたいなもの。

{{^xxx}}
処理
{{/xxx}}

↓hoge内のfugaを出力するが、かっこ３つ{{{}}}はテキストがそのまま出力される。
かっこ２つ{{}}の場合はHTMLエンコードされる。

{{#hoge}}
{{{fuga}}}
{{/hoge}}

（参考）
http://wata.hateblo.jp/entry/2012/06/12/003151