準備
<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を出力するが、かっこ3つ{{{}}}はテキストがそのまま出力される。
かっこ2つ{{}}の場合はHTMLエンコードされる。
{{#hoge}}
{{{fuga}}}
{{/hoge}}