javascript - 如何避免使用 Handlebars 重复代码块？

Question

我有一个像这样的json:

{
    "icons-container-set-1" : [
        {
          "data-tab": "tab1",
          "image" : "researchKO.png",
          "class-first" : "first",
          "fragments-title" : "Access award-winning <br> research",
          "fragments-paragraph" : "..."
        },
        {
          "data-tab": "tab2",
          "image" : "WideRangeUp.png",
          "class-first" : "",
          "fragments-title" : "A full range <br> of investments",
          "fragments-paragraph" : "..."
        }
    ],
    "icons-container-set-2" : [
        {
          "data-tab": "tab1",
          "image" : "im.png",
          "class-first" : "first",
          "fragments-title" : "...",
          "fragments-paragraph" : "..."
        },
        {
          "data-tab": "tab2",
          "image" : "img.png",
          "class-first" : "",
          "fragments-title" : "...",
          "fragments-paragraph" : "..."
        }
    ]
}

这是一组选项卡组件。 html 看起来像这样:

对于集合 1 和 2，我唯一要更改的是代码 {{#each process.icons-container-set-1}} 的第一行 {{ #each process.icons-container-set-2}}:

{{#each process.icons-container-set-1}}
    <div class="icons-container {{{class-first}}}" data-tab="{{{data-tab}}}">
        <div class="icon-up">
            <img src="assets/images/{{{image}}}" alt="">
        </div>
        <p class="fragments-title">{{{fragments-title}}}</p>
        <p class="fragments-paragraph">{{{fragments-paragraph}}}</p>
    </div>
{{/each}}

为了避免在 html 中重复该代码块，有什么建议吗？

我用上面的 html 做了一个单独的组件，但我意识到我必须重复相同的操作，实际上我不仅有 2 组选项卡，大约有 6 个。

我想是否有一个选项可以获取 json 文件中集合的索引:

例如:{{#each process.icons-container-set-*@GET_INDEX_HERE*}}

建议？

Answer 1

如果您可以向 json 添加一些内容，请尝试这样做，然后您将能够迭代您的元素。例如，您可以命名图标容器集列表:

{
   "icon-container":[
      {
         "icons-container-set":[
            {
               "data-tab":"tab1",
               "image":"researchKO.png",
               "class-first":"first",
               "fragments-title":"Access award-winning <br> research",
               "fragments-paragraph":"..."
            },
            {
               "data-tab":"tab2",
               "image":"WideRangeUp.png",
               "class-first":"",
               "fragments-title":"A full range <br> of investments",
               "fragments-paragraph":"..."
            }
         ]
      },
      {
         "icons-container-set":[
            {
               "data-tab":"tab1",
               "image":"im.png",
               "class-first":"first",
               "fragments-title":"...",
               "fragments-paragraph":"..."
            },
            {
               "data-tab":"tab2",
               "image":"img.png",
               "class-first":"",
               "fragments-title":"...",
               "fragments-paragraph":"..."
            }
         ]
      }
   ]
}

然后

{{#each process.icons-container}}
  {{#each icons-container-set}}
        <div class="icons-container {{{class-first}}}" data-tab="{{{data-tab}}}">
            <div class="icon-up">
                <img src="assets/images/{{{image}}}" alt="">
            </div>
            <p class="fragments-title">{{{fragments-title}}}</p>
            <p class="fragments-paragraph">{{{fragments-paragraph}}}</p>
        </div>
    {{/each}}
{{/each}}