I am trying to use or condition in the template file, If any variable is true from these 3 then the condition should run but it's not working.
In template file this is my condition
{{#if imagesP videoP allImg }}
<div class="my-cls" id="img1">
</div>
{{/if}}
In global file, I have registered helper
UI.registerHelper('or', function(a, b, c) {
return a || b || c;
});
The if statement doesn't rely on your helper for evaluation.
try this for instance:
{{#if (or imagesP videoP allImg) }}
<div class="my-cls" id="img1">
</div>
{{/if}}
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
}
}
});
How can one make spacebars react when the set key does not exist in the template?
Example:
//JavaScript
Template.foo.helpers({
//"zaz" : "hello",
"bar" : 1
});
...
<!-- Template -->
<template name="foo">
{{bar}}
{{#ifExist zaz}}
{{zaz}}
{{else}}
"fill-me"
{{/ifExist}}
</template>
You can just check if your helper is defined by using a simple if statement followed by the helper or value you want to check:
<template name="foo">
{{bar}}
{{#if zaz}}
{{zaz}}
{{else}}
fill-me
{{/if}}
</template>
I've created a custom block helper for Meteor 0.9.3 using information from the following URL:
https://github.com/meteor/meteor/wiki/Using-Blaze#new-pattern-for-defining-custom-block-helpers
It can be used within a Spacebars template like so:
{{#ifEqual value1="stringOrNumber_1" value2="stringOrNumber_2"}}
<h1>The values ARE equal!</h1>
{{else}}
<h1>The values are NOT equal!</h1>
{{/ifEqual}}
Here is the code:
<template name="ifEqual">
{{#if isEqual value1 value2}}
{{> UI.contentBlock}}
{{else}}
{{> UI.elseBlock}}
{{/if}}
</template>
Template.ifEqual.isEqual = function (value1, value2) {
return value1 === value2;
};
My question is:
Is there a possible way to make this less clunky?
I would much prefer code that can be used within a template like so:
{{#ifEqual "stringOrNumber_1" "stringOrNumber_2"}}
...
I would register a global equals helper:
Template.registerHelper('equals', function(value1, value2){
return value1 === value2
})
And then use it like this:
{{#if equals "abc" "abc"}}
<p>They're equal :)</p>
{{else}}
<p>They're not equal :(</p>
{{/if}}
Though, you may be interested in using the underscore-helper package instead, so you don't have to define this (and similar) helpers yourself.
I am trying to assign values within a template, the idea is to do something like this:
{{#if author}}
{{className = 'classA'}} <- trying to implement this line.
{{else}}
{{className = 'classB'}}
{{/if}}
<div class={{className}}></div>
Is it possible to do so without registerHelper?
I needed this solution solved in the same way the original poster expected. Therefore I created a helper function to do this for me.
function setVariable(varName, varValue, options){
options.data.root[varName] = varValue;
};
Contained within the options in the helper, is the data block, with the root of the helper variables.
I placed my variable within the root object, either assigning or overwriting with the value provided.
The helper in html looks a lot like this.
{{setVariable "thisVar" "Contents Here"}}
<div>
{{thisVar}}
</div>
You can do this with a partial.
partial:
<div class="{{classname}}">{{var1.author}}</div>
template:
{{#if author}}
{{> mypartial var1=. classname="classA"}}
{{else}}
{{> mypartial var1=. classname="classB"}}
{{/if}}
In this example I've passed the current scope as var1. I can't recall if the scope stays the same and the new variable is just added to it or if you have to pass the scope manually.
Small update from a helpful above answer. In Handlebars 4.x, it seems we have to get the variables from #root.
handlebars.registerHelper('assign', function (varName, varValue, options) {
if (!options.data.root) {
options.data.root = {};
}
options.data.root[varName] = varValue;
});
And then,
{{assign 'imageTag' 'drop-155'}}
{{#root.imageTag}}
{{#if author}}
<div class='{{ classA }}'></div>
{{else}}
<div class='{{ classB }}'></div>
{{/if}}
or try
<div class='{{#if author}} {{ classA }} {{else}} {{ classB }} {{/if}}'></div>
or maybe this
create a script
<script>
$(function(){
var class;
{{#if author}}
class = {{ classA }}
{{else}}
class = {{ classB }}
{{/if}}
var $specials = $('.special');
$specials.removeClass('special');
$specials.addClass(class);
})
</script>
Say we have a parent template and a child template:
<template name="parent">
{{> child }}
</template>
<template name="child">
{{#if show}}
//Do something
{{/if}}
</template>
If we assign 'show' to the parent template:
if (Meteor.isClient){
Template.parent.show = function(){
return Session.get('isShowing');
}
}
Is there any way for the child template to have access to it?
Edit
You could make a universal handlebars helper so you could use Sessions values anywhere in your html:
Client js
Handlebars.registerHelper('session', function(key) {
return Session.get(key);
});
Client HTML
<template name="child">
{{#if session "show"}}
//Do something
{{/if}}
</template>
Similarly, you could also use {{session "show"}} / {{#if session "show"}} in your parent template and not have to use the Template.parent.show helper anymore.
Regarding the use of ../ notation. There are certain scenarios it may not work: https://github.com/meteor/meteor/issues/563. Basically it works within {{#block helpers}} but not with templates, but it would work in a block helper if it contains a subtemplate.
<template name="child">
{{#if ../show}}
Do something
{{/if}}
</template>
You can also register a common helper :
Template.registerHelper('isTrue', function(boolean) {
return boolean == "true";
});
And call it just like that in your html:
<input type="checkbox" checked="{{isTrue attr}}"/>