Say I have the following code:
<div>
{{#each questions}}
<div id="question_{{#index}}">
{{#each this.answers}}
<div id="answer_{{???}}_{{#index}}">
{{this}}
</div>
{{/each}}
</div>
{{/each}
</div>
How can I access the outer loop's index (question index) inside of the inner (answer) loop? Essentially I want the id in the format of "answer_questionIndex_answerIndex"
Found this deep in some documentation
Block Parameters
New in Handlebars 3.0, it's possible to receive named parameters from supporting helpers.
{{#each users as |user userId|}}
Id: {{userId}} Name: {{user.name}}
{{/each}}
In this particular example, user will have the same value as the current context and userId will have the index value for the iteration.
https://handlebarsjs.com/guide/block-helpers.html#hash-arguments
Related
Say I have this array:
var arr = [
[1,4,6,8,3,9,1],
[2,4,6,7,3,2,7]
];
And I want to iterate over it with mandrill -> handlebar #each how will I do it ?
so far I have something like
{{#each arr}}
{{#each this}}
{{this}}
{{/each}}
{{/each}}
the above will output the desired result but when I add a condition inside the second each this value changes to an array I assume it takes the parent this - not sure.
{{#each arr}}
{{#each this}}
{{#if #first}}
<div>{{this}} - first</div>
{{else}}
<div>{{this}}</div>
{{/if}}
{{/each}}
{{/each}}
More over when I use normal handlebars it works perfectly fine.
E.G. http://jsfiddle.net/ccrmwont/2/
This is pretty specific issue I know but I am stuck with this for 2 days now.
you should use the index in your second iteration:
{{#each arr}}
{{#each 0}}
{{#if #first}}
<div>{{0.0}} - first element in first array</div>
<div>{{0.1}} - second element in first array</div>
{{/each}}
{{#each 1}}
<div>{{1.0}} -first element in second array</div>
<div>{{1.1}} -second element in second array</div>
{{/each}}
{{/each}}
I dont think Mandrill yet supports full handlebars functionality, this is probably the best way to do this at the moment. See more here:
https://mandrill.zendesk.com/hc/en-us/articles/205582537-Using-Handlebars-for-dynamic-content
I've a problem, or more probably a misundertanding with variable passed to the template on Meteor.
I want to do something really simple; I've a Collection of articles. Each article have an correspondy inner Tags array.
template articles
<template name="articles">
<div class="row">
<div class="small-12 small-centered columns">
{{#each articles}}
{{> _article}}
{{/each}}
</div>
</div>
</template>
partial _article
<template name="_article">
<div class="article-container small-12 columns">
<div class="article-header small-12 columns">
<h1 class="left">Titre: {{title}}</h1>
<button class="right delete">×</button>
</div>
<article class="overview small-12 columns">
<h2>Categorie: {{nameCateg}}</h2>
<h2>{{createdAt}}</h2>
<p>{{content}}</p>
</article>
<div class="article-footer small-12 columns">
<p>Tags:
{{#each tags}} // I want to do something like that...
lbl: {{tag.label}}
{{/each}}
</p>
</div>
</div>
</template>
Inspection on one article with Mongol
{
"_id:" "c47cezerzerz",
"title": "titre,
"tags"[
{"id": "aurtht58",
"label": "tag1"},
{"id": "aurthfe8",
"label": "tag2"}
]
}
When I try to iterate with the #each on tags, tags seems to refers to the whole tags collection, not only the inner tags list. How to fix that?
So I've maybe missed something, like the scope of these variables... Actually I don't really know how they work...
The context inside {{#each}} is a child context focused on the document currently being iterated.
For example with the following document:
{
foo : [
{
bar : 1
},
{
bar : 2
}
]
}
You would use it this way:
{{#each foo}}
<p>bar is : {{bar}} and also {{this.bar}}</p>
{{/each}}
So, in your case, directly reference the fields ({{label}}, ...)
The lookup is first done on the current template context, then on its helpers, then up and up toward the global helpers.
Template contexts are a whole topic, a good starting point in the SpaceBars documentation.
I think that until you access to the tags level, you iterate on a cursor. (to be confirmed). A cursor is obtained with a collection.find() if you add a fetch()or use collection.findOne() you get an array (in your case, you just access an array within your document) and the rules are changing for the spacebar iteration.
You need to access your tags using {{this}} and tag items using {{this.label}}
this is my structor
{{#each a in aa}}
{{_view.contentIndex}} --> PARENT
{{#each a in aa}}
{{_view.contentIndex}} --> This should be the same PARENT val
{{/each}}
{{/each}}
The problem is that i that in the second loop i'm getting the value for the current scope, buy i need to get the parent scope, is there a way in ember/handlebars to get this?
If I understand the documentation correctly, you should be able to do this:
{{#each parent}}
{{_view.contentIndex}} --> PARENT
{{#with parent}}
{{#each otherThing}}
{{_view.contentIndex}} This should be the same PARENT val
{{/each}}
{{/with}}
{{/each}}
the outermost loop will be the parent items.
the inner loop using {{with}} should loop through each item inside of each individual parent.
I have a container view which, among other things, displays a list of objects, like so:
{{#each}}
<div {{bind-attr class="author.first_name task"}}></div>
{{/each}}
I would like to hook a Javascript function everytime a DOM element is added to this list. I've tried doing:
didInsertElement: function() { ... }
But this hook apparently runs only the first time the view is initialized. I figured that maybe the hook doesn't run because the view is actually inserted once, and what's inserted more than once are just the nested element.
So should I use a nested view?
I tried something along these lines:
{{#each}}
{{#view App.SingleItemView}}
<div {{bind-attr class="author.first_name task"}}></div>
{{/view}}
{{/each}}
But in this case, though it works somehow, it doesn't get passed the necessary data that would render the properties such as author.first_name.
render will give you a new scope and is really easy to assign the content as well
<ul>
{{#each item in controller}}
{{render 'ind' item}}
{{/each}}
</ul>
http://emberjs.jsbin.com/alAKubo/1/edit
I understand how to transverse the data source within Handlebars but I have stumbled across a situation I cannot work out.
Using "../" you can reach the parent template scope but when iterating through the child of an object it seems to return the object and not the child.
{{#each content.items}}
{{#if prop}}
<p>{{prop}} + {{../../variable}}</p>
{{/if}}
{{/each}}
The above code snippet works fine if you iterate through an object called 'content' but as soon as you iterate through it's child, 'content.items' it no longer returns the right scope.
Here is a fiddle which demonstrates the issue. http://jsfiddle.net/sidonaldson/MDdn2/
Can anyone shed any light on what is wrong?
It turns out that my original thought was wrong. I've only used Handlebars.js inside the context of Ember.js. Ember provides some extra helpers that aren't available in plain Handlebars, so that wasn't an option. But I did seem to figure out your issue. Check this fiddle.
<p>IN CONTENT</p>
{{#with content}}
{{#each items}}
{{#if prop}}
<p>{{prop}} + {{../../variable}}</p>
{{/if}}
{{/each}}
{{/with}}
<p>OUTSIDE CONTENT</p>
{{#each items}}
{{#if prop}}
<p>{{prop}} + {{../../variable}}</p>
{{/if}}
{{/each}}
I'm not sure why it didn't work in the first place, but using the with helper, then the each helper seemed to work. Hopefully I've come close to what you wanted.