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}}

如何避免用把手重复代码块？

1 个答案: