CODEWITHSUNDEEP
javascripthtmlnode.jshandlebars.js
czlowiek488
czlowiek488

Reputation: 235

handlebars, access to parent each loop variable

I have code like here. I would like to set input name to @index from previous each loop.

Can I access @previousIndex somehow? Or can I assign inputs to some kind of group created before second each loop that will set all input names inside?

Data I receive:

 questions:[  
  {  
     question:"How old are you?",
     answers:[  
        '16',
        '18',
        '20',
        '25',
        'other'
     ]
  },
  {  
     question:"How many kids do you have?",
     answers:[  
        '0',
        '1',
        '2',
        'other'
     ]
  }
]

hbs code: 

{{#each questions}}
    <li>
        <h3 class='question'>{{this.question}}</h2>
        <div class='flexbox'>
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{@previousIndex}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>
    </li>
{{/each}}

Upvotes: 1

Views: 1111

Answers (3)

czlowiek488
czlowiek488

Reputation: 235

I had to create two helper functions like here. Get is here because I wasn`t able to access variable directly from .hbs file by simply writing {{myVariableName}}. Hbs file looks now like here.

<div class='flexbox'>
            {{assign "parentIndex" @index }}
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{get "parentIndex"}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>

helpers

assign: function(varName, varValue, options) {
    options.data.root[varName] = varValue;
}

get: function(varName, options) {
    return options.data.root[varName]
}

Upvotes: 0

Harshal Yeole
Harshal Yeole

Reputation: 4983

When you are using #each then you get the index in @index and if you want previousIndex why not just do parseInt(@index) - 1

Here's how you do it:

var Handlebars = require('handlebars');

Handlebars.registerHelper("previous", function(value, options)
{
    return parseInt(value) - 1;
});

Now update your hbs code as:

{{#each questions}}
    <li>
        <h3 class='question'>{{this.question}}</h2>
        <div class='flexbox'>
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{previous @index}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>
    </li>
{{/each}}

Hope this works for you!

Upvotes: 2

Tarek N. Elsamni
Tarek N. Elsamni

Reputation: 1837

I can't give you a 100% working code (environment is not currently setup) but from my previous experience with handlebars I will try to guide you to a possible solution.

{{assign "previousIndex" 0}}
{{#each questions}}
    <li>
        <h3 class='question'>{{this.question}}</h2>
        <div class='flexbox'>
            {{#each this.answers}}
            <label class="container">
                <input type='radio' name='{{../previousIndex}}' value='{{@index}}'>  
                <span class='checkmark'>{{this}}</span>
            </label>              
            {{/each}}
        </div>
    </li>
    {{assign "../previousIndex" "{{@index}}"}}
{{/each}}

Upvotes: 1

Related Questions