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

You could create a custom Handlebars helper to do this.

Answer 2

If you define your isValid as a property, you can use it in your if statement without creating a custom Handlebars helper, see http://jsfiddle.net/pangratz666/Dq6ZY/:

Handlebars:

<script type="text/x-handlebars" data-template-name="obj-template" >
    {{view Ember.TextField valueBinding="age" }}
    {{#if isValid}}
        Si Si.
    {{else}}
        Nope!
    {{/if}}
</script>​

JavaScript:

App.MyObj = Ember.Object.extend({
    isValid: function() {
        return this.get('age') >= 18;
    }.property('age')
});

Ember.View.create({
    templateName: 'obj-template',
    controller: App.MyObj.create({
        age: 21
    })
}).append();

​

Answer 3

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)

Answer 4

Try this:

<ul>
  {{#each subsites}}
    {{#if this}}
      <li>{{{WhatIsTheSiteFor this}}}</li>
    {{else}}
      <li>no found</li>
    {{/if}}
  {{/each}}
</ul>

The helper function WhatIsTheSiteFor:

Handlebars.registerHelper('WhatIsTheSiteFor', function(siteName) {
  var subSiteName = '',
      siteNameStr = '';

  $.each(siteName, function(i, item) {
    siteNameStr += item;
    return siteNameStr;
  });

  if(siteNameStr === 's.gbin1.com') {
    subSiteName = '<a href="http://' + siteNameStr + '">GB搜索引擎</a>';
  }
  else if (siteNameStr === 'm.gbin1.com') {
    subSiteName = '<a href="http://' + siteNameStr + '">GB手机阅读</a>';
  }
  else if (siteNameStr === 'rss.gbin1.com') {
    subSiteName = '<a href="http://' + siteNameStr + '">RSS消息订阅</a>';
  }

  return subSiteName;
});

A demo can be found here: http://www.gbin1.com/gb/networks/uploads/71bb1c1e-0cd3-4990-a177-35ce2612ce81/demo6.html