Wie vermeidet man es, Codeabschnitte mit dem Lenker zu wiederholen?

Question

Ich habe eine json wie folgt aus:

{ 
    "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" : "..." 
     } 
    ] 
} 

Dies ist für eine Reihe von Registerkarten componentes. Die HTML sieht wie folgt aus:

Für den Satz 1 und 2 das einzige, was ich ist {{#each process.icons-container-set-1}} für {{#each process.icons-container-set-2}} auf der ersten Zeile des Codes am Wechsel:

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

Irgendwelche Vorschläge, um dieses Stück zu wiederholen Code in der HTML?

Ich habe eine separate Komponente mit dem oben html, aber ich erkennen, dass ich das gleiche sein muß wiederholen, und ich nur zwei Sätze von Tabs, gibt es wie 6.en

eigentlich gar nicht, dass ich denke, wenn gibt es eine Option, den Index der Sätze in der jSON-Datei zu erhalten:

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

Verbesserungsvorschläge?

Answer 1

Wenn Sie etwas zu Ihrem JSON hinzufügen können, versuchen Sie dies, und dann können Sie über Ihr Element iterieren. Zum Beispiel können Sie Ihre Liste der Symbol-Container-Sets nennen:

{ 
    "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":"..." 
      } 
     ] 
     } 
    ] 
} 

und dann

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