I have a handlebars template like this:
{{#each items}}
<li id="{{id}}">{{name}}</li>
{{/each}}
Now I want to split this template as I want to reuse the template for li
main.hbs:
{{#each items}}
{{>child }}
{{/each}}
child.hbs
<li id="{{id}}">{{name}}</li>
But unfortunattly the child template cant access ../route
You can pass in the parent context to the child partial like so:
{{#each items}}
{{>child this}}
{{/each}}
You are also going to probably fix the route value to look like this
<li id="{{id}}">{{name}}</li>
Related
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}}">
In the document handlebars
{{#each articles.[10].[#comments]}}
<h1>{{subject}}</h1>
<div>
{{body}}
</div>
{{/each}}
but I want such use it
{{#each nav-list.value}}
<li class="nav-{{#index}}">
{{{../[content.value].value}}}
</li>
{{/each}}
Obviously， it dons't work! How should I implement this...
Usually I just do {{pathFor 'dashboard'}}
But what if I get the path 'dashboard' from template helper as {{name}}
I can't do this{{pathFor '{{name}}'}} but I need to!
It's a submenu which looks like:
{{#each connectedChannels}}
{{> submenuChannel}}
{{/each}}
<template name="submenuChannel">
<li>
<span class="sidebar-text">{{name}}</span>
</li>
</template>
It should work if you remove the quotes and braces around name:
<a href="{{pathFor name}}">
I have a meteor template that looks something like the following. Essentially I would like to pass something from my parent template to my child. Is there a way to do this?
<template name="parent">
Hello my name is {{name}}
{{#each children}}
{{> child}}
{{/each}}
</template>
<template name="child">
Hello my name is {{child_name}} and my parent's name is [not sure what to do]
</template>
Any help would be greatly appreciated!
Use the dotdot operator to traverse to parent views.
<template name="parent">
Hello my name is {{name}}
{{#each children}}
{{> child}}
{{/each}}
</template>
<template name="child">
Hello my name is {{child_name}} and my parent's name is {{../name}}
</template>
See demo here and documentation here
Suppose I want to build a dynamic table. How do I run each inside each. If the only varible that represents current item is this.
{{#each by_width}}
{{#each by_height}}
{{this}} // how do refer to this from the outer loop?
{{/each}}
{{/each}}
You can use ../ to access the parent in a Handlebars template:
{{#each by_width}}
{{#each by_height}}
w: {{../this}}
h: {{this}}
{{/each}}
{{/each}}
That of course assumes that by_height is inside each element of by_width, if they're both at the top level then you'd need another ../:
{{#each by_width}}
{{#each ../by_height}}
w: {{../this}}
h: {{this}}
{{/each}}
{{/each}}
Demo: http://jsfiddle.net/ambiguous/PNTXw/
Don't write {{../this}} but {{..this}}.