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);
});
Related
How can I write an if not x statement in an HBS template file?
At present, I use an if/else clause in order to achieve that:
{{#if x}}
{{else}}
Some Text
{{/if}}
Is there a way to simplify this and use a single if statement?
I've tried stuff like {{#if !x}} and {{#if ^x}}, but it didn't work of course.
Looking on the web for HBS logical operators, I couldn't quite find the syntax for a logical-not.
Update
I should emphasize that in my case x is undefined.
I've learned it "the hard way", while trying:
{{#if not x}}
Some Text
{{/if}}
Which threw TypeError: Cannot read property 'includeZero' of undefined.
Have you tried unless?
<div class="entry">
{{#unless license}}
<h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
</div>
You can use the unless helper as the inverse of the if helper. Its
block will be rendered if the expression returns a falsy value.
https://handlebarsjs.com/builtin_helpers.html
You can also considers custom helpers:
Handlebars.registerHelper("ifNot", function(a, options){
if (!a) {
return options.fn(this);
}else{
try{
return options.inverse(this);
}catch(e){
//no else statement
}
}
});
I’d like to find a conditionally rendered element after the template is rendered.
The template:
<template name="one">
<div class="normal">Normal</div>
{{#if active}}
<div class="conditional">Conditional</div>
{{/if}}
</template>
The code:
Template.one.onRendered(function() {
console.log(this.find(".normal"));
console.log(this.find(".conditional");
}
The above will log the ‘.normal’ but null for the ‘.conditional’ (the condition is true, both elements are present in the final DOM). The reason for that is well documented: onRender runs before {{#if}}s. But I want to run after the whole template is rendered, with all its {{#if}}s.
Is there a way to find that .conditional without making it a separate template?
I'm facing the same issue. This is because what's inside the {{#if}} block is rendered as a dynamically generated template.
So, the best workaround I've found so far is to render a specific template inside the {{#if}} block and add a callback to this specific template:
Here's what you should do:
<template name="one">
<div class="normal">Normal</div>
{{#if active}}
{{> activeTemplate}}
{{/if}}
</template>
<template name="activeTemplate">
<div class="conditional">Conditional</div>
</template>
Template.activeTemplate.onRendered(function() {
console.log(this.find(".conditional");
}
You won't find the DOM element because it doesn't exist.
It doesn't exist because active is false.
If you want active to return true:
Template.one.helpers({
"active": function() { return true; }
})
Looking at this Using Blaze guide, it seems Blaze supports {{#if}} and {{else}} statements, but I have't seen examples of an if-else statement. Is this supported in Blaze? Or do I have to do an additional if block inside the else block, which can get ugly.
I tried {{else if}}, but that gave an error.
{{#if en}}{{text.en}}{{else if tc}}{{text.tc}}{{/if}}
Spacebars uses the same control flow structure as handlebars so the answer is the same as this one. In your case:
{{#if en}}
{{text.en}}
{{else}}
{{#if tc}}
{{text.tc}}
{{/if}}
{{/if}}
Side note - one of the nice things about jade is that it supports else if.
Sometimes a better alternative is to move the logic into a helper like this:
Template.myTemplate.helpers({
textValue: function() {
if (this.en) {
return this.text.tc;
} else if (this.tc) {
return this.text.tc;
}
}
});
<template name="myTemplate">
<p>{{textValue}}</p>
</template>
The current version of Blaze supports else if - see below for a sample format and reference to the github issue resolution.
{{#if isUserProfile}}
<h3>User Profile</h3>
{{else if isLawyerProfile}}
<h3>Lawyer Profile</h3>
{{else}}
<h3>Test</h3>
{{/if}}
Reference Link: GitHub Else If Issue Resoltion
Following on from #David Wheldon's excellent answer, it's also worth noting that you can pass parameters to your JavaScript helper functions from your Blaze template.
So, for example the code below selectively renders the options for a select list by calling the helper method with the line isSelected region customerCompany:
{{#if isSelected region customerCompany}}
<option value={{region._id}} selected>{{region.name}}</option>
{{else}}
<option value={{region._id}}>{{region.name}}</option>
{{/if}}
and then in the js file:
isSelected: function (region, customer) {
return customer.salesRegionId === region._id;
},
This approach of passing in your variables to your helpers is generally recommended to avoid the confusion that can the arise with the changing meaning of the this keyword when using templates.
I've got a situation where I'm rendering a Handlebars partial recursively based on a Mongodb tree structure, something like this :
<template name='menu'>
<ul class='menu'>
{{#each topLevelChildren}}
{{>menu-item}}
{{/each}}
</ul>
</template>
<template name='menu-item'>
<li>{{name}}
{{#if listChildren.count}}
<ul>
{{#each listChildren}}
{{>menu-item}}
{{/each}}
</ul>
{{/if}}
</li>
</template>
where the mongodb docs look like this :
{ _id : ObjectId("525eb7245359090f41b65106"),
name : 'Foo',
children : [ ObjectId("525eb60c5359090f41b65104"), ObjectId("525eb6ca5359090f41b65105") ]
}
and listChildren just returns a cursor containing the full docs for each element in the children array of the parent.
I want to do a bit of jquery makeup on the rendered tree, but I can't seem to hook into the 'rendered' event for the entire tree, something like
Template.menu-completed.rendered = function(){
// console.log('done!');
}
Trying this
Template.menu.rendered = function(){
console.log($('menu li'));
}
Not only doesn't this return the right results (brackets filled with commas), it also freezes web inspector (but not the app...).
Any help would be much appreciated !
This is an interesting problem :)
In the current version of Meteor (0.7.x) the rendered callback is called once when the template is first rendered, and then again once any partial inside the template is re-rendered. (This behavior will change when Meteor 0.8 - the shark branch or "Meteor UI" - lands.)
I've never tried doing things recursively, but it's going to be very hard to tell which callback you get is actually for the parent. One thing you might want to try is to start the recursive rendering in a template called menu-parent or something. That way, when the rendered callback is called for the first time (and as long as your data is loaded), you know the whole tree is rendered.
However, I suspect there might be a better way to do this. Generally, you should not be using jQuery to modify classes and attributes on DOM elements, as you'll confuse yourself as to what Meteor is doing and what jQuery is doing. Can you elaborate on what you are trying to achieve with the following, and I'll update my answer?
I need to find a specific anchor tag within the fully rendered template and add a class to it... and then add a class to each of its parents
Petrov, your code actually works for me, with just some minor modification to the jquery part. But perhaps I'm misunderstanding. Here is what I did:
Created a brand new project.
Added your template in the .html with minor change: <li><span class="name">{{name}}</span>
Created a new collection List.
Template.menu.topLevelChildren = function() { return List.find(); };
Then I added this handler:
Template.menu.rendered = function(e){
$('.name').each(function(i, e) {
console.log(e);
});
}
Now, upon render, for instance when new data is inserted into the List collection, I get a printout on the console like this:
<span class="name">second</span>
<span class="name">second2</span>
<span class="name">second21</span>
<span class="name">second22</span>
<span class="name">third</span>
<span class="name">third2</span>
<span class="name">third21</span>
<span class="name">third22</span>
<span class="name">third</span>
<span class="name">third2</span>
<span class="name">third21</span>
<span class="name">third22</span>
This is just a flat list of the tree elements I had added (where second2 is nested in second, and second2x is nested in second2, etc.). So from what I understand you could just take the selection coming back from jquery and find the tag you are looking for and change its class, as you wanted. Please let me know if I misunderstood something.
Complete code below.
test.html:
<head>
<title>test</title>
</head>
<body>
{{> menu }}
</body>
<template name='menu'>
<ul class='menu'>
{{#each topLevelChildren}}
{{>menu-item}}
{{/each}}
</ul>
</template>
<template name='menu-item'>
<li><span class="name">{{name}}</span>
<ul>
{{#each children}}
{{>menu-item}}
{{/each}}
</ul>
</li>
</template>
test.js:
List = new Meteor.Collection("List");
if (Meteor.isClient) {
Template.menu.topLevelChildren = function() {
return List.find();
};
Template.menu.rendered = function(e){
$('.name').each(function(i, e) {
console.log(e);
});
}
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
Is it possibly to use global variables in Handlebars conditionals? I'm writing an app that lists a lot of objects, and I want users to be able to control which details are listed. For example, displaying only first names in a list of people, like so:
<ul>
{{#each people}}
<li>
<p>{{firstName}}</p>
{{#if displayLastnames}}
<p>{{lastName}}</p>
{{/if}}
</li>
{{/each}}
</ul>
I don't want to actually modify the data (for example, by removing the lastName attribute and doing {{#if lastName}}).
You can also register a global helper named 'displayLastnames' and use it in a if :
Handlebars.registerHelper('displayLastnames', function(block) {
return displayLastnames; //just return global variable value
});
and just use it as in your sample :
{{#if displayLastnames}}
<p>{{lastName}}</p>
{{/if}}
Handlebars namespaces the variables so you can't directly access global variables. Probably the easiest thing to do is to add your own helper, something simple like this:
Handlebars.registerHelper('if_displayLastnames', function(block) {
if(displayLastnames)
return block.fn(this);
else
return block.inverse(this);
});
and then in your template:
{{#if_displayLastnames}}
<p>{{lastName}}</p>
{{/if_displayLastnames}}
You'd probably want to put your "global" variables in their own namespace of course.
Demo: http://jsfiddle.net/ambiguous/Y34b4/