Is it possible to use function in Handlebars #if?

Question

I have a controller object that's like:

MyApp.objController = Ember.ArrayController.create({
  init: function(data) {
    data.isValid = function() {
      return (data.validity === "valid");
    }
    this.pushObject(MyApp.MyObj.create(data));
  }
});

My view is like:

{{#each MyApp.objController}}
  {{#if isValid}}
   <some markup>
   {{else}}
   <some other markup>
  {{/if}}
{{/each}}

I was assuming that the if conditional in Handlebars accepts both values and functions, but this doesn't seem to be the case. Is it actually possible, and I'm just doing it wrong?

Answer 1

Handlebars if statements only compares if a value exists, to if it is a falsy value (ie non-existant, 0, an empty string etc.). You have to write a custom helper function.

You could do it like this

Handlebars.registerHelper('isValid', function (value, options) {
    if (value == "valid") {
        return options.fn(this);
    }
    return options.inverse(this);
});

This registers a block helper. If the value you pass in evaluates to "valid" it returns the template following the the helper with the current data. If it does not evaluate to valid it returns the template following the else statement with the current data.

Then in your template you could use it like this

{{#each MyApp.objController}}
    {{#isValid validity}}
        <some markup>
    {{else}}
        <some other markup>
    {{/isValid}}
{{/each}}

Otherwise, if you wanted to abide by the spirit of Handlebars and do a 'logic-less' template, set a flag before you render the template indicating whether or not that data is valid, then use the handlebars if helper with the flag.

You could also possible set up a generic function to handle this and other cases. See my answer in Logical operator in a handlebars.js {{#if}} conditional for an example for a generic if (similar to the above answer)