Handlebars.js按值分组

Question

我使用工具栏通过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/