mandrill - handlebars how can i iterate over 2 dimension array? - javascript

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

Related

Handlebars access outer index in nested loop

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

Handlebars render only some elements

I have the following handlebars template:
<script type="text/x-handlebars" data-template-name="index">
{{log model}}
<button {{action 'getSuggestion'}}>Get suggestion</button>
{{log suggestion}}
{{#if suggestion}}
<p>There is a suggestion</p>
{{else}}
<p>NO suggestion</p>
{{/if}}
<ul>
{{#each item in model}}
<li>{{item}}</li>
{{/each}}
</ul>
</script>
Currently, the two log work as expected, but the button between them is not rendered.
A while ago I've added another <p>text</p> right in the beginning of the template and again, it didn't render.
Do you have any idea why? And is there a specific way to debug Ember applications? I find Handlebars extremely unpredictive, with elements being rendered or not after no specific reason, and with no errors shown...
The thing was pretty simple: I was using a somewhat older version of Ember.js. Updating to the latest one made everything work again.

Get parent loop index each handlebars

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.

How Do I Access a Parent's Data Attribute in Meteor Template?

I was trying to extend an application and found out that whenever I try to access the _id value from inside an #if clause, it always returns empty...
This example returns the {{_../id}}:
<template name="showsId">
{{# each comments}}
<div class="id">{{../_id}}</div>
{{/each}}
</template>
But this one doesn't:
<template name="doesNotShowId">
{{# each comments}}
{{#if editingComments}}
<div class="id">{{../_id}}</div>
{{else}}
<div class="id">{{../_id}}</div>
{{/if}}
{{/each}}
</template>
Do you know why this might be happening? As far as I know this should work as expected.
EDIT:
This is a template that's being called from another one, in this fashion:
<template name="statusitems">
<div>
{{#each statusItem}}
<div>
{{> statusComments }}
</div>
{{/each}}
</div>
</template>
That's why I'm asking for the {{../_id}}.
For both data contexts, the comment document seems to be provided by the each iterator.
Therefore, I believe you should not be using ../ anyway since the document properties suchs as _id are already provided within the data context.
This should work as is:
<template name="doesNotShowId">
{{# each comments}}
{{#if editingComments}}
<div class="id">{{_id}}</div>
{{else}}
<div class="id">{{_id}}</div>
{{/if}}
{{/each}}
</template>
So should this:
<template name="doesNotShowId">
{{# each comments}}
<div class="id">{{_id}}</div>
{{/each}}
</template>

Handlebars.js - Getting parent context within an each loop, an if statement and a child object

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.

Categories

Resources