Question

我循环通过一个数组，我需要索引...它循环，但我没有得到索引... {{this.title}}和{{this.content}}的输出工作

{{> accordion data=home.services}}

我的手风琴

{{#each data}}
<div class="c_accordion__item c_accordion__item--active">
    <header class="c_accordion__header">
        <a href="js_item-{{@index}}" class="link js_accordion_toggle">
            <svg class="c_accordion__toggle-icon icon-arrow">
                <use xlink:href="#arrow"></use>
            <svg>
            <h1 class="largest c_accordion__title">
                {{this.title}}      
            </h1>
        </a>
    </header>
    <div id="js_item-{{@index}}" class="c_accordion__content">
        <p>{{this.content}}</p>
        <a href="#" class="link c_accordion__more">mehr lesen</a>
    </div>
</div>
{{/each}}

我的json

{
    ...
    "services":[
     {
        "title": "headline1",
        "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
     },
     {
        "title": "headline2",
        "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
     },
     {
        "title": "headline3",
        "content": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
     },
     ....
     ]
}

我还尝试了来自http://assemble.io/helpers/helpers-collections.html

的eachIndex的帮助器

是的我先安装它;）（npm i handlebars-helpers --save-dev）

它只是循环，但我没有得到索引的值，而不是data.title或data.content

格里

Answer 1

我把它计算出来，它适用于每个索引，以获得你必须使用“this”的索引并获得obj的属性。 “项”

{{#eachIndex data}}
<div class="c_accordion__item c_accordion__item--active">
    <header class="c_accordion__header">
        <a href="js_item-{{this.index}}" class="link js_accordion_toggle">
            <svg class="c_accordion__toggle-icon icon-arrow">
                <use xlink:href="#arrow"></use>
            <svg>
            <h1 class="largest c_accordion__title">
                {{item.title}}      
            </h1>
        </a>
    </header>
    <div id="js_item-{{this.index}}" class="c_accordion__content">
        <p>{{item.content}}</p>
        <a href="#" class="link c_accordion__more">mehr lesen</a>
    </div>
</div>
{{/eachIndex}}

汇编：eachIndex或者每个都没有索引

1 个答案: