I'm trying to pass a variable (tag name) into a Handlebars partial and use an #is block helper on the tag but for some reason it just won't play ball. This is my code:
Call to my partial and passing through the tag name.
{{> nav tagged='page' }}
In the partial itself I do the following (tagged is the variable name passed through):
{{#each tags}}
{{#is tag tagged}}
{{#each pages}}
// Do code here
{{/each}}
{{/is}}
{{/each}}
If I just render the tagged variable it displays the variable value as expected so a bit confused as to why its not working.
Thanks.
The issue you have is that the tagged variable is in the parent context but you're trying to reference it within the #each tags loop.
You can reference the parent context with ../ so the working code would be
{{#each tags}}
{{#is tag ../tagged}}
{{#each pages}}
// Do code here
{{/each}}
{{/is}}
{{/each}}
Related
http://jsfiddle.net/0ttb7pug/1/
I do not have the desired result, only first loop executed
{{#each loop1}}
<ul>{{val1}}
{{#each loop2}}
<li>{{val2}}</li>
{{/each}}
</ul>
{{/each}}
Since your second {{#each}} is within the first, its context has changed to that of each object in the first array. To resolve your issue, you need to get access to the root context of your template data (or at least the context above), which can be achieved with either ../loop2 (which takes you up one context) or #root.loop2 (which takes you to the top-most context)
{{#each loop1}}
<ul>{{val1}}
{{#each ../loop2}} //or #root.loop2
<li>{{val2}}</li>
{{/each}}
</ul>
{{/each}}
I have a JSON object that I am looping through to dynamically create x amount of ULs then LIs. I need to create two {{#each}} to create the content. However when I add a CSS class to my handlebars template it does not come through onto the UL as it does in the second {{#each}} - how do I stop this? Here is the template:
<div class="{{panel-container__Css-class}} {{panel-menu__Css-class}}" data-component="panel">
{{#each sections}}
<ul id="{{id}}" class="{{panel-menu__Css-class}}">
{{#each list}}
<li>{{title}}</li>
{{/each}}
</ul>
{{/each}}
</div>
Here is what i am passing in:
<nav data-component="navigation">
{{> nav-dropdown menu-button__Css-class="menu-button" menu-button__Css-class-nav="panel" target-id="panel-nav" }}
{{> nav-dropdown menu-button__Css-class="region-button" menu-button__Css-class-nav="region" target-id="panel-region" menu-button__copy=panel.copy}}
{{!--var links = [{"title": "Test","url": "/"}];--}}
{{> panel panel-menu__Css-class="navigation__menu-styles" panel-container__Css-class="navigation__menu-container" sections=navigation.sections links=navigation.sections.list }}
</nav>
I think what you are looking for is the Handlebars path that will allow you to obtain the value of panel-menu__Css-class from within {{#each sections}}. You need to understand that when you are within {{#each sections}}, your this context is the currently iterated element of the sections array. You must step up a level to the parent context which has the panel-menu__Css-class property you are trying to access:
<ul id="{{id}}" class="{{../panel-menu__Css-class}}">
I have a structure like this:
obj: {
array: [{
string: 'hello'
},
string: 'tim'
}]
}
how can i print all the string propery in an unordered list?
i'm trying with this but it doesn't print nothing
<ul>
{{#each array}}
<li>{{this string}}</li>
{{/each}}
</ul>
Try this code
<ul>
{{#each array}}
<li>{{this.string}}</li>
{{/each}}
</ul>
TL;DR: According to each helper code in the docs, context is set to current item.
Second argument implicitly passed to helper is options object, that contains fn property. This property is a function that behaves like a normal compiled Handlebars template (containing what have been placed between {{#each}} and {{/each}}).
Helper iterates over the array and evaluate the template for each item. Concatenated result is returned.
So, you don't have to use this.
<ul>
{{#each array}}
<li>{{string}}</li>
{{/each}}
</ul>
Fiddle Example
I am using meteor 1.4 for building a real time task assignment app.
I am stuck at a point when i want to include a template passing in an argument the template helper of that template to run.
Now when i pass the argument, it is passed as a string and i want to call that template helper. But i cannot find any way in spacebars to call a template helper when i have the helper name available as a context variable of string type.
Please tell whether it is possible and if yes, then how ??
Thanks in advance
Edit 1 - For ex.
<template name="parent">
{{> children helperParameter="someHelper"}}
</template>
<template name="child">
{{> child2 value=helperParameter }}
</template>
<template name="innerchild">
{{value}}
</template>
So basically, I want to pass the value returned by someHelper to the template innerchild and i want to decide which helper (in this case someHelper) to run in child by passing the name of that helper to child template from parent template.
Now, i can not run that helper in child template where i have its name in parameter helperParameter as a string.
Try Template.dynamic.
<template name="layout">
{{> Template.dynamic template=template}}
<!-- This is equivalent to
{{> nameOfNeededTemplate}}
-->
</template>
Template.layout.helpers({
template: function() {
return 'nameOfNeededTemplate';
}
});
<script id="contact-row" type="text/x-handlebars-template" >
{{#each rows}}
<tr>
{{getInputField #index "country" country }}
{{#each contactData}}
{{getInputFieldForData #index "contractName" contractName }}
{{/each}}
</tr>
{{/each}}
I want to get the index of the parent in the inner #each loop. I tried ../#index but that gives error.
Looks like things have changed...
To get the index of a parent {{#each}} block from within a child {{#each}} block use the {{#../index}} syntax.
{{#each foo}}
{{#index}} // Parent Index Reference
{{someProperty}} // Parent property
{{#each baz}}
{{#index}} // Child Index Reference
{{#../index}} // Parent Index Reference <--
{{someProperty}} // Child property
{{/each}}
{{/each}}
The link in the accepted answer has this solution, just posting the details here for posterity's sake.
It looks like this is not currently possible the way you want to do it: https://github.com/wycats/handlebars.js/issues/491
But you could set the index to a new variable in the outer scope to access it.