有没有方法用Handlebars.js迭代地图？

Question

使用Handlebars.js迭代数组很容易:

{{#each comments}}
<div class="comment">
  <h2>{{title}}</h2>
  {{{{url}}}
</div>
{{/each}}

和一个像这样的数组:

{
  comments: [
   { url: "http://www.yehudakatz.com", title: "Katz Got Your Tongue" },
   { url: "http://www.sproutcore.com/block", title: "SproutCore Blog" }, 
  ]
}

但我没有找到迭代地图的方法,如:

{
  headers: { 
     "Host": "www.example.com", 
     "Location": "http://www.example.com",

     ... Much more map items ... 
  }
}

有没有方法用Handlebars.js迭代地图？或者我必须重新构建对象,如:

{
  headers: [
   { key: "Host", value: "www.example.com" },
   { key: "Location", value: "http://www.example.com" }, 
  ]
}

Answer 1

现在支持:

{{#each headers}}
    Key: {{@key}}, Value: {{this}}
{{/each}}

Answer 2

上面的答案是在正确的轨道上,这是我的改进:

Handlebars.registerHelper( 'eachInMap', function ( map, block ) {
   var out = '';
   Object.keys( map ).map(function( prop ) {
      out += block.fn( {key: prop, value: map[ prop ]} );
   });
   return out;
} );

并使用它:

{{#eachInMap myMap}}
key:{{key}} value: {{value}}
{{/eachInMap}}

Answer 3

Handlebars.js 的最新版本支持更具可读性的迭代格式（请参阅此处）：

{{#each object as |value key|}}
    {{key}} => {{value}}
{{/each}}

在我看来，这并不@key像 Tasos Zervos 的回答所建议的那样引入语法那么令人惊讶。