A strange phenomenon with the {{#if}} helper


Hi, everyone, there’s a strange phenomenon in my code. Can anyone help me with this?

In the handlebars file, I wrote:

{{log "foo:" foo}}
{{#if foo}}

The console displays a false string, however the bar is rendered. Shouldn’t the browser render baz instead?


Please make your code available on jsbin so we can have a closer look at it.


Hi, kgish. This is my first time using jsbin, I’m not sure whether you can see my code here.


It might be the reason that localStorage.foo returns a string of "false", not false.


Not sure I understand why your using localStorage, and also don’t forget that if you are using setupController you MUST call this._super(controller, model) as the FIRST statement. Try replacing your app.js with something like the following:

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  setupController: function(controller, model) {
    this._super(controller, model);
    controller.set('foo', false);


That is why, since !!"false" -> true


Thanks, jasonmit.

I found a discuss about Cannot set boolean values in LocalStorage on stackoverflow. So I guess there’s nothing wrong with {{#if}} helper.

I intended to send some values from the ApplicationRoute to another route, so I tried the localStorage at first. Now I change to use the this.controllerFor() function in the setupController, and it works fine!