Handlebars.js按值分组

Question

我正在使用Handlebars通过ajax显示一些数据，而JSON如下所示：

{"data":[
  { "sn":"43","areasn":"3","name":"X1","status":"empty","seats":"12"},
  { "sn":"22","areasn":"1","name":"F1","status":"empty","seats":"8"},
  { "sn":"12","areasn":"2","name":"E1","status":"empty","seats":"6"},
  { "sn":"18","areasn":"3","name":"R3","status":"empty","seats":"6"},
  { "sn":"31","areasn":"1","name":"G4","status":"empty","seats":"4"},
  { "sn":"23","areasn":"2","name":"W5","status":"empty","seats":"12"}
]}

我需要使用handlebars.js才能在不同区域显示表格，如下所示：

<script id="tables-template" type="text/x-handlebars-template">
  {{#each data}}
    // All tables in area-1
    <ul id="area-{{areasn}}">
      <li id="{{sn}}">{{name}}</li>
    </ul>

    // All tables in area-2
    <ul id="area-{{areasn}}">
      <li id="{{sn}}">{{name}}</li>
    </ul>

    // All tables in area-3
    <ul id="area-{{areasn}}">
      <li id="{{sn}}">{{name}}</li>
    </ul>
  {{/each}}
</script>

我不知道如何为此写一个助手，有人可以帮忙吗？ 谢谢！

Answer 1

可能有更好的方法，因为我对车把不了解，但这应该可以满足您的需求：

(function() {

    var id = 0,
        cache = [];
        var ids={};  
    Handlebars.registerHelper("groupData", function(data) {
        var dataKey = id++;
        ids[data.areasn]=true;
        if(cache[data.areasn]==undefined)  cache[data.areasn]={id:data.areasn, data:[data]};
        else cache[data.areasn].data.push(data)
        if(dataKey==context.data.length-1){
           context.cache=[];
            for(var i in ids){
                context.cache.push(cache[i])
            } 
        }
    });
})();

var context={"data":[
  { "sn":"43","areasn":"3","name":"X1","status":"empty","seats":"12"},
  { "sn":"22","areasn":"1","name":"F1","status":"empty","seats":"8"},
  { "sn":"12","areasn":"2","name":"E1","status":"empty","seats":"6"},
  { "sn":"18","areasn":"3","name":"R3","status":"empty","seats":"6"},
  { "sn":"31","areasn":"1","name":"G4","status":"empty","seats":"4"},
  { "sn":"23","areasn":"2","name":"W5","status":"empty","seats":"12"}
]}

var template = Handlebars.compile($("#your-template").text());
var html = template(context);
document.body.innerHTML=html;

检查小提琴是否有html： http : //jsfiddle.net/mE49M/226/