CODEWITHSUNDEEP
meteormeteor-blaze
Joan
Joan

Reputation: 270

Blaze: Logic (Not, Or, And…) in {{#if}} statement

Is there a way to do logic operation in {{#if}} statement? I was hoping for something like:

{{#if A && B}}
  some html
{{/if}}

I couldn’t find documentation about logic in blaze, so I guess it’s not supported. I just wanted to be sure. Sorry for the rather stupid question...

Upvotes: 6

Views: 7172

Answers (3)

Santini Arnaud
Santini Arnaud

Reputation: 19

here is my version :

Template.registerHelper("and", function() {
  return Array.prototype.slice.call(arguments, 0, -1).filter(arg => arg == true).length == arguments.length - 1;
});

Template.registerHelper("or", function() {
  return Array.prototype.slice.call(arguments, 0, -1).filter(arg => arg == true).length > 0;
});

You can now use x arguments to check, like :

{{#if and check_1 check_2 check3}}

You will notice the slice(0,-1), Blaze add one more argument to the function.

Upvotes: 2

Michel Floyd
Michel Floyd

Reputation: 20256

As Billy Bob suggests, you would need parameterized helpers. Here are two global helpers you could use in any context:

Template.registerHelper('and',(a,b)=>{
  return a && b;
});
Template.registerHelper('or',(a,b)=>{
  return a || b;
});

Then you could use these with:

{{#if and a b}}
  a and b are both true-ish
{{/if}}
{{#if or a b}}
  a or b is true-ish
{{/if}}

Upvotes: 19

Billybobbonnet
Billybobbonnet

Reputation: 3226

Spacebars is designed to avoid including logic operations in the html. But it does not mean you can't have one : you need to use helpers. Basically, you have 2 conditional cases:

  • The simple {{#if something}} and its twin {{#unless something}} (understand it as "if not"). This is what you want, and your helper would look like this

    Meteor.yourTemplate.helpers({
  something : function () {
     return A && B
  }
});

  • The more complicated {{#if something 'value'}} where you use an argument for your something helper :

    Meteor.yourTemplate.helpers({
   something : function (value) {
      if (value === true){
        return true
      } else {
        return false
      }
  });

Upvotes: 2

Related Questions