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

1

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}}
    bar
{{else}}
    baz
{{/if}}

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

2

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

3

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

4

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

5

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);
  }
});
6

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

7

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!