Question

我正在尝试使用嵌套的每张照片显示评论，但无法正常工作：

照片：{id，描述，所有者，链接}的数组

评论：{id，commentText，photoTarget}的数组// photoTraget是照片ID

index.js：

res.render('wall', { title: "Baker's Wall", photos, comments });

wall.hbs：

{{#each photos}}
{{@index}}: {{this}}
   {{#each ../comments}}
   {{#if_eq photoTarget  @../index.id}}
   <div class="titleR1">{{this.text}}</div>
   {{/if_eq}}
   {{/each}}
{{/each}}

app.js：

hbs.registerHelper('if_eq', function(a, b, opts) {
  if(a == b)
      return opts.fn(this);
  else
      return opts.inverse(this);
});

编辑

photo obj screenshot

comments obj screenshot

Answer 1

我立即看到两个问题：

首先，您访问照片id的方式是错误的。 @../index.id试图在id对象上查找index属性，该对象比当前对象高一个上下文级别。 @index是一个便利变量，当在#each循环内时，Handlebars将保存当前的迭代索引。它是一个数字，因此没有id属性。在父级上下文中查找照片的id的正确方法是：../id-告诉Handlebars提升一个上下文级别并获得id属性。（请注意，@也不应使用。@是Handlebars为其特殊的@data变量使用的前缀。

第二，您的问题指出您的comments对象每个都有一个“ commentText”属性，但是您的模板引用了{{this.text}}。如果问题是正确的，则应为{{this.commentText}}（或仅为{{commentText}}。

我创建了一个fiddle供您参考。（注意：我已经更改了模板中的HTML，以使呈现的结果更令人愉悦）

优化

您可能要考虑更新数据结构，以便每个photo对象都有自己的comments数组。这将使您的模板更加简单，因为您不需要if_eq帮助器。此外，这将防止重复循环浏览所有注释。您当前的模板会为{em>每个 comments在photo中循环一次。通过循环comments一次并将每个注释添加到其各自的photo，您将在渲染时节省不必要的迭代。

javascript +把手嵌套#each

1 个答案: