Lets say I have an array like this in ember controller,
selectedUsers: ["Popeye", "Sulley", "Gru"];
Now, how can i render each users in an unordered list using handlebars? Can i use the {{#Each}} helper?
Yes, you should use an each loop:
<ul>
{{#each selectedUsers}}
<li>{{ this }}</li>
{{/each}}
</ul>
From the docs:
You can iterate over a list using the built-in each helper. Inside the block, you can use this to reference the element being iterated over.
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
when used with this context:
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
will result in:
<ul class="people_list">
<li>Yehuda Katz</li>
<li>Alan Johnson</li>
<li>Charles Jolley</li>
</ul>
You can use the this expression in any context to reference the current context.
This also works
<ul>
{{#each this}}
<li>{{ this }}</li>
{{/each}}
</ul>
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...
I'm doing category sidebar template for online shop. I will use that in 2 places - on customer, and admin side. Each one will have own service of clicking on category. I want to pass parameter "redirect" which will decide what action will be done, but the problem is, that parameter isn't visible in nested templates - only in 1st level categories.
HTML :
<template name="categoriesSidebar">
<ul>
{{#each mainCategories}}
<li>
{{> categoriesSidebarItem redirect=true data=this }}
</li>
{{/each}}
</ul>
</template>
<template name="categoriesSidebarItem">
<a href="#">
{{data.name}}
</a>
{{#if data.subCategories.length}}
<ul>
{{#each subCats }}
<li>
{{> categoriesSidebarItem redirect=redirect data=this }}
</li>
{{/each}}
</ul>
{{/if}}
</template>
Javascript :
Template.categoriesSidebar.helpers({
mainCategories: function() {
return Categories.find({'categoryLevel' : 1});
}
});
Template.categoriesSidebarItem.helpers({
subCats : function(){
return Categories.find({_id:{$in: this.data.subCategories}});
}
});
Template.categoriesSidebarItem.events({
'click a' : function(event){
if(this.redirect == true){
Router.go('category',{_id : this.data._id});
return false;
}else{
//categoryId is ReactiveVar used in another template
categoryId.set(this.category._id);
}
}
})
Result :
Women
Nike
Men
Nike
Adidas
Women and Men category work well , after clicking on them, "redirect" is seen as true and Router redirects to desired route, but for nested categories, "redirect" parameter is undefined.
How to pass that parameter to nested template ?
Change the code to this:
{{#if data.subCategories.length}}
<ul>
{{#each subCats }}
<li>
{{> categoriesSidebarItem redirect=../redirect data=this }}
</li>
{{/each}}
</ul>
{{/if}}
The each block changes the data context, so you need to retrieve redirect from the parent data context. That's what ../ does.
How can I render this Meteor Blaze Template ? I would like to use the negative of the IF, but I don't find anywhere how to use it.
<ul>
{{#each pages}}
{{#if (--NOT--) isCover }}
<li> some content {{value}} </li>
{{/if}}
{{/each}}
</ul>
Previous research not found solution
https://github.com/meteor/meteor/wiki/Using-Blaze
Check for equality in Spacebars?
Note: if I use only the if statement is working without problem, also I could do and else but I would like to have it only with the if(!isCover) solution
You need to use the {{#unless}} block helper.
http://blazejs.org/
{{#unless isCover}}
<li> some content {{value}} </li>
{{/unless}}
Faced same issue, we created a Utility kind of method to invert the boolean values.
"invertBoolean" : function (inputValueBoolean) {
return !inputValueBoolean;
}
which can be used as below
{{#if invertBoolean isCover }}
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>