handlebars, access to parent each loop variable

handlebars nested each
handlebars if greater than 0
handlebars each
handlebars each not working
handlebars compare
handlebars variables
handlebar helpers
express-handlebars loop

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

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!

nested iteration with ability to access parent · Issue #129 , nested iteration with ability to access parent #129 I would like to use handlebars.js to iterate over a list of families, and then iterate over However, once I get into the second iteration, none of the family variables are visible. {{#​each families}} {{#each members}} <p>{{ ( here I want a family name property )  Home » Javascript » Access properties of the parent with a Handlebars 'each' loop Access properties of the parent with a Handlebars 'each' loop Posted by: admin November 21, 2017 Leave a comment

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

Nested {{each}} loops: context/scope is messed up when current , an each within an each), in any iteration where the parent loop's current we try to access the same variable we're iterating through; if the scope is the different each loops, Handlebars sees that as being the same depth. Handlebars - reaching up to a value in the parent context . I had a weird situation where my data looked like this (the object that gets passed into the template function):

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

Built-in Helpers, If its argument returns false , undefined , null , "" , 0 , or [] , Handlebars will not render the block. Nested each blocks may access the iteration variables via depth based paths. To access the parent index, for example, {{@. The first and last steps of iteration are noted via the @first and @last variables when iterating over an array. When iterating over an object only the @first is available. Nested each blocks may access the iteration variables via depth based paths. To access the parent index, for example, {{@../index}} can be used. #

Handlebars Cookbook, The old context becomes parent context, you can use {{..}} to access parent context. This is a handlebars.js extension, mustache do not support this. Think I've encountered a bug. If you have a nested each (i.e., an each within an each), in any iteration where the parent loop's current value is equal to the child loop's current value, the context/scoping appears to be off.

Handlebars, In my template I was looping through the items but within that loop I had to reach back up to the parent context to check the isAdmin value, this seems strange but​  Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. Handlebars is largely compatible with Mustache templates. In most cases it is possible to swap out Mustache with Handlebars and continue using your current templates. Handlebars compiles templates into JavaScript functions.

Access parent level variables from within a handlebar {{each}} loop , Problem: When using the {{each}} handlebar helper there is a need to access a parent level variable within the {{each}} loop. Solution: nested iteration with ability to access how can we use that to find the parent animal? I would like to use handlebars.js to iterate over a list of families, and

Comments
  • Maybe this will help you stackoverflow.com/questions/38696860/…
  • Is this solved? check the answer below? Did it work?
  • I post my own answer.