Edit in JSFiddle

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: