var dataObject = {
members:[
{id:1, name:"hoge", text:"aaaaaaaaaaaaaa"},
{id:9, name:"fuga", text:"bbbbbbbbbbbbbb"},
{id:15, name:"hoge", text:"cccccccccccccc"},
{id:22, name:"fuga", text:"dddddddddddddd"},
{id:78, name:"hoge", text:"eeeeeeeeeeeeee"},
{id:876, name:"fuga", text:"ffffffffffffff"},
{id:1033, name:"hoge", text:"gggggggggggggg"},
{id:7899, name:"fuga", text:"hhhhhhhhhhhhhh"}
]
}; // -> End of dataObject
// クラスを追加するためのヘルパー
Handlebars.registerHelper('addclasses', function(num) {
if(num % 2 == 1){
return "even";
}else{
return "odd";
}
});
//
var tpl_source = $("#item_tmpl").html();
var h = Handlebars.compile(tpl_source);
var content = h(dataObject);
// output
var results = document.getElementById("results");
results.innerHTML = content;
<ul id="results">
output results here.
</ul>
<script type="text/x-handlebars-template" id="item_tmpl">
{{#members}}
<li id="{{id}}" class="{{addclasses @index}} ">
{{@index}}人目 {{text}} (from {{name}}[ID:{{id}}])
</li>
{{/members}}
</script>
li{
border-bottom: 1px dotted #CCCCCC;
}
li.odd{
background: #FFFFEE;
}
li.even{
background: #FFFFCC;
}
External resources loaded into this fiddle: