Handlebar 迭代数组对象答案

【问题标题】：Handlebar iterate Object of arraysHandlebar 迭代数组对象
【发布时间】：2017-08-06 07:51:28
【问题描述】：

我正在寻找数组对象的迭代列表

这是我的示例对象

var Categories =    {
      "communication": [
        {
          "id": "communication_001",
          "category": "communication",
          "lastModified": "4 Day ago"
        },
        {
          "id": "communication_002",
          "category": "communication",
          "lastModified": "1 Day ago"
        }
      ],
      "social": [
        {
          "id": "social_001",
          "category": "social",
          "lastModified": "2 Day ago"
        }
      ],
      "storage": [
        {
          "id": "storage_001",
          "category": "storage",
          "lastModified": "3 Day ago"
        }
      ]
    }

这里我正在使用车把

 var render = Handlebars.compile(template)

render({ Categories : Categories  })

那么我的编译模板是什么？

给我推荐车把模板

【问题讨论】：

标签： javascript html node.js handlebars.js

【解决方案1】：

如果您确切知道要迭代哪个键，则可以尝试以下方法：

<div>
 {{#each communication}}
  <div>{{id}}</div>
  <div>{{category}}</div>
  <div>{{lastModified}}</div>
 {{/each}}

 {{#each social}}
  <div>{{id}}</div>
  <div>{{category}}</div>
  <div>{{lastModified}}</div>
 {{/each}}

 {{#each category}}
  <div>{{id}}</div>
  <div>{{category}}</div>
  <div>{{lastModified}}</div>
 {{/each}}
</div>

否则，您可以尝试在 this 对象上使用双 #each 进行迭代，以访问所有子对象并自动迭代键：

<div>
 {{#each this}}
  {{#each this}}
   <div>{{id}}</div>
   <div>{{category}}</div>
   <div>{{lastModified}}</div>
  {{/each}}
 {{/each}}
</div>

希望这会有所帮助！

【讨论】：

【解决方案2】：

您可以像遍历数组一样遍历对象。您无需将数据包装在另一个对象中 — 只需参考 this。

var categories = {
  "communication": [{
      "id": "communication_001",
      "category": "communication",
      "lastModified": "4 days ago"
    }, {
      "id": "communication_002",
      "category": "communication",
      "lastModified": "1 day ago"
    }
  ],
  "social": [{
    "id": "social_001",
    "category": "social",
    "lastModified": "2 days ago"
  }],
  "storage": [{
    "id": "storage_001",
    "category": "storage",
    "lastModified": "3 days ago"
  }]
};
var template = document.getElementById('template').innerHTML;
var render = Handlebars.compile(template);

document.getElementById('target-element').innerHTML = render(categories);

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>

<div id="target-element"></div>

<script id="template" type="text/x-handlebars-template">
 <h1>Categories</h1>
 {{#each this}}
  <h2>{{@key}}</h2>
  <ul>
  {{#each this}}
   <li><span>{{id}}</span> &mdash; <span>{{lastModified}}</span></li>
  {{/each}}
  </ul>
 {{/each}}
</script>

【讨论】：