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.registerHelper( 'eachInMap', function ( map, block ) {
   Object.keys( myObj ).map(function( prop ) {
       return block( myObj[ prop ] );
   });
} );

您可以在模板中输入

：

{{#eachInMap mapObject}}
some HTML and other stuff
{{/eachInMap}}

就是这样。希望它有用吗

Answer 4

与Map（）一起使用的更完整的示例 - 从把手中获取支持函数 - 这将允许eachOfMap中的块变量工作。

    function appendContextPath(contextPath, id) {
      return (contextPath ? contextPath + '.' : '') + id;
    }

    function blockParams(params, ids) {
      params.path = ids;
      return params;
    }

    Handlebars.registerHelper('eachOfMap', function (map, options) {
      let contextPath;
      if (options.data && options.ids) {
        contextPath = appendContextPath(options.data.contextPath, options.ids[0]) + '.';
      }

      let data = Handlebars.createFrame(options.data);

      var out = '';
      for (let [key, item] of map) {
        data.key = key;
        if (contextPath) {
          data.contextPath = contextPath+key;
        }
        // out += block.fn({"key": key, "value": item});
        out = out + options.fn(item, {
          data: item,
          blockParams: blockParams([item, key], [contextPath + key, null])
        });
      }
      return out;
    })

用法：

    let dataAsMap = new Map([["keyOne", {name: "bob", age: 99}], ["keyTwo", {name: "alice", age: 99}]]);

    {{#eachOfMap (dataAsMap)}}
      <li>
        {{> "fragments/childTemplate"}}
      </li>
    {{/eachInMap}}

    <span>Hey {{name}}, you're {{age}} years </span>

Answer 5

如果有人在谷歌上搜索在Handlebars中迭代ES6 Map 的方法时遇到了这个问题，这里有一个帮手：

Handlebars.registerHelper('eachInMap', (map, block) => {
  let output = '';

  for (const [ key, value ] of map) {
    output += block.fn({ key, value });
  }

  return output;
});

示例，演示Map初始化和迭代：

const map = new Map([['name', 'Nicholas'], ['age': 25]]);

来自Nicholas C. Zakas的Understanding ECMAScript 6书中的ES6 Map初始化样本。

在Handlebars.js模板中使用新助手：

{{#eachInMap map}}
  key: {{ key }}, value: {{ value }}
{{/eachInMap}}

现在你已经准备好迭代Handlebars 中的原生ES6 Map！

Answer 6

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

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

在我看来，这没有像Tasos Zervos的答案所建议的引入@key语法那样令人惊讶。

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

6 个答案: