如何在Handlebars中遍历类对象数组？传递并遍历动物数组显示属性

嘿，我来帮你搞定这个问题！其实Handlebars遍历类对象数组的核心是确保类实例的属性能被Handlebars访问到，然后通过{{#each}}助手来遍历数组，下面结合你的animals数组一步步说明：

第一步：确保类的属性是可访问的 #

首先，你的animal类需要把属性挂载到实例上（也就是用this.xxx），这样Handlebars才能读取到这些属性。比如修正后的类定义：

// 规范起见，类名首字母大写哦
class Animal {
  constructor(name, isPet, legs) {
    this.name = name;    // 公开属性，Handlebars可访问
    this.isPet = isPet;
    this.legs = legs;
  }
}

// 你的动物数组
var animals = [
  new Animal("giraffe", false, 4),
  new Animal("zebra", false, 8),
  new Animal("lion", false, 10),
  new Animal("dog", true, 4),
  new Animal("cat", true, 2)
];

⚠️ 注意：如果类里用了私有属性（比如#name），Handlebars是无法读取的，必须用公开的实例属性。

第二步：编写Handlebars模板 #

在HTML里定义模板，用{{#each}}遍历animals数组，然后直接访问每个实例的属性：

<!-- 页面上用来展示结果的容器 -->
<div id="animal-container"></div>

<!-- Handlebars模板 -->
<script id="animal-template" type="text/x-handlebars-template">
  <h3>动物列表</h3>
  <ul>
    {{#each animals}}
      <li class="animal-item">
        <strong>名字：</strong>{{name}}<br>
        <strong>是否为宠物：</strong>{{#if isPet}}是{{else}}否{{/if}}<br>
        <strong>腿的数量：</strong>{{legs}}
      </li>
    {{/each}}
  </ul>
</script>

这里的{{#each animals}}会遍历上下文里的animals数组，每次迭代的上下文就是数组里的单个Animal实例，所以可以直接写{{name}}、{{isPet}}来访问属性。

第三步：编译模板并渲染数据 #

最后在JavaScript里完成编译和渲染的步骤：

// 1. 获取模板源代码
var templateSource = document.getElementById("animal-template").innerHTML;
// 2. 编译模板
var animalTemplate = Handlebars.compile(templateSource);
// 3. 准备上下文数据（把animals数组传进去）
var context = { animals: animals };
// 4. 渲染得到HTML字符串
var renderedHtml = animalTemplate(context);
// 5. 把渲染后的内容插入到页面容器中
document.getElementById("animal-container").innerHTML = renderedHtml;

如果是Node.js+Express环境 #

如果你是在后端用Express搭配Handlebars模板引擎，传递数据的方式略有不同：

1. 在路由里把animals数组传入渲染上下文：

app.get('/animals', (req, res) => {
  res.render('animals-page', { animals: animals });
});

2. 在对应的模板文件（比如views/animals-page.hbs）里，直接用{{#each}}遍历即可，写法和前端模板一致。

这样就能完整展示每个动物的所有属性啦！

内容的提问来源于stack exchange，提问作者Hoang Minh