如何使用把手 (hbs) 迭代嵌套数组和对象？

Posted 2023-03-16

【中文标题】如何使用把手 (hbs) 迭代嵌套数组和对象？

【英文标题】：How to iterate nested array and objects using handlebars (hbs)?

【发布时间】：2021-09-30 18:44:03

【问题描述】：

我正在从 JSON 迭代嵌套数组。对象嵌套在几个级别中。我需要从image_groups 属性中的第二个数组中获取第一个图像。到目前为止，我已经设法到达 link 属性，但我无法选择我需要的唯一一个特定链接，而不是数组中的所有图像链接。

代码：

<div class="col-md-4">
   #each image_groups~
   #each images~
   <h6>title</h6>
   <img src="../images/link" >
   /each
   /each
</div>

JSON 的屏幕截图：

它在浏览器中的显示方式：

【问题讨论】：

我不确定“我需要的唯一一个特定链接”是什么意思。每张图片看起来只有一个 link，所以它可能是您想要定位的 images 数组中的一张图片？

@76484，你是对的！我只想定位一个链接。我只想在页面上显示一张图片。

你需要表达一些逻辑来确定每个images数组中的哪个图像是你的目标。是第一个吗？最后？你想要哪张图片？

【参考方案1】：

最后，我设法找到了解决方案。我应该跳出 each 循环并绑定下一个字符串：

<img
 src="../images/image_groups.0.images.0.link"
 
>

【讨论】：

这不是一个非常明确的答案。你还在使用#each image_groups~ 循环吗？

不，我不应该进入 #each image_groups~ 循环。抱歉，答案不清楚。

【参考方案2】：

恭喜您解决了问题！

我想提出一个替代解决方案，我认为它可以使模板更简洁。

由于我们已经确定我们不再需要任何#each 循环，因为我们只在第一个图像组的第一张图像之后，我们可以看到我们只剩下<h6> 和<img> 标记。这两个标签要填充的值都来自我们的目标图像对象。

我建议使用 Handlebars 的#with built-in helper。这个帮助器允许我们为模板的一部分设置数据上下文。将上下文设置为我们的目标图像对象将使我们免于重写其长路径，从而使我们能够简单而干净地访问其属性，例如title。

带有#with 的最终模板是：

<div class="col-md-4">
  #with image_groups.[0].images.[0]
    <h6>title</h6>
    <img
      
      src="link"
    >
  /with
</div>

我创建了一个fiddle 供您参考。