Search code examples
handlebars.jseachassemble

assemble: eachIndex or each get no index


i loop throug an array and i need the index... it loops, but i dont get an index... the output for {{this.title}} and {{this.content}} works

{{> accordion data=home.services}}

my accordion

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

my 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"
     },
     ....
     ]
}

i also tried this helpers with eachIndex from http://assemble.io/helpers/helpers-collections.html

and yes i installed it first ;) (npm i handlebars-helpers --save-dev)

it only loops, but i get no value not for index and not for data.title or data.content

gregor


Solution

  • i fount it out, it works with eachindex, to get the index you have to use "this" and to get the properties of the obj. "item"

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