javascript +车把嵌套#each答案

【问题标题】：javascript + handlebars nested #eachjavascript +车把嵌套#each
【发布时间】：2019-01-04 13:36:10
【问题描述】：

我正在尝试使用每个嵌套显示照片的 cmets，但我无法让它工作：

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

cmets: array of {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

【问题讨论】：

您能否重新格式化photos 和comments 数组，以便我们看到它们的样子？当前输出是多少？
@Rastalamm 我添加了一些截图。我没有得到任何输出，不满足 if_eq 的条件

标签： javascript express handlebars.js helper

【解决方案1】：

我立即看到两个问题：

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

其次，您的问题表明您的comments 对象每个都有一个“commentText”属性，但您的模板引用了{{this.text}}。如果问题是正确的，那么这应该是{{this.commentText}}（或只是{{commentText}}。

我创建了一个fiddle 供您参考。（注：我已经更改了模板中的 HTML 以使渲染的结果更讨人喜欢）

优化

您可能需要考虑更新您的数据结构，以便每个photo 对象都有自己的comments 数组。这将使您的模板更简单，因为您不需要 if_eq 助手。此外，它将防止重复循环遍历所有 cmets。您当前的模板循环通过comments 一次每个 photo。通过循环一次comments 并将每个评论添加到其各自的photo，您将在渲染时节省不必要的迭代。

【讨论】：