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 }}
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}}">
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.
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}}">
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>
I am trying to write a conditional if statement helper for Handlebars.js. Essentially, I want to put an "active" class on a link if it is the Apply Now page.
Helper:
Handlebars.registerHelper('isApplyNow', function(block) {
if(this.title == "Apply Now") {
return block(this);
} else {
return block.inverse(this);
}
});
And Template:
<ul>
{{#each pages}}
<li>
{{#isApplyNow}}
<a href="{{url}}" class ='active'>{{this.title}}</a>
{{else}}
{{this.title}}
{{/if}}
</li>
{{/each}}
</ul>
But, I am getting a very bare-bones javascript error:
Uncaught [object Object] in handlebars-1.0.0.beta.2.js:595
Can anyone see if I am writing this improperly?
Thanks!
Referenced articles:
Calling Helper Within If Block in Handlebars Template
http://thinkvitamin.com/code/handlebars-js-part-2-partials-and-helpers/
I do see one minor syntax mistake which I believe could be the issue. If you are going to use a helper that takes a block, then you have to close it with the helper name. See how I've replaced your {{/if}} with {{/isApplyNow}}, like so:
{{#isApplyNow}}
<a href="{{url}}" class ='active'>{{this.title}}</a>
{{else}}
{{this.title}}
{{/isApplyNow}}
NOTE:
block(this) in the helper will not work anymore. Instead, use block.fn(this)
e.g.
Handlebars.registerHelper('isApplyNow', function(block) {
if (this.title === "Apply Now")
return block.fn(this);
else
return block.inverse(this);
});