Question

I’m hoping someone can explain what I’m doing wrong here. I’m using Ember.js with handlebars templates, I’ve tried a number of ways to get handlebars #if else working for me but it always returns both the contents of if and else.. Here’s the code I’m currently using.

App.js:

App = Ember.Application.create({
  selectedView: "Home",
  IsHome: function() {
    this.get('selectedView') === 'Home'
}.property('selectedView')

});

index.html head contains:

<script type="text/x-handlebars" data-template-name="home-view">
      Hello, This is the home view.
</script>
<script type="text/x-handlebars" data-template-name="edit-account">
      Hello, This is the account edit view.
</script>

and in the body:

<script type="text/x-handlebars">
{{#if App.IsHome}}
   {{view HomeView}}
{{else}}
  {{view editAccountView}}
{{/if}}
</script>

This ends up showing both views in the body of the page. Any advice is appreciated,

thanks
Steve

Answer 1

The fundamental reason for your problem is the Handlebars view helper ( {{view MyView}} ) expects a path parameter to an Ember “class”, not an instance of a class. To create a view class use the extend method of Ember.View. The Handlebars view helper will instantiate your view class and append it to the document for you.

See this post for more information on the Ember object model and the differences between Ember’s extend and create methods: http://ember-object-model.notlong.com.

Here is your example with a few changes made to correct the points I made above. http://jsfiddle.net/ethan_selzer/kcjzw/217/

Regards,

Ethan