Ember.js handlebars if, else statement

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

I forgot to add the view declarations in App.js: var homeView = Ember.View.create({ templateName: 'home-view', }).appendTo('#right'); var editAccountView = Ember.View.create({ templateName: 'edit-account', }).appendTo(#right); — SBignell
– SBignell, Commented Jul 8, 2012 at 17:54

Ethan Selzer · Accepted Answer · 2012-07-08 23:13:59Z

5

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

answered Jul 8, 2012 at 23:13

Ethan Selzer

1,75515 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SBignell Over a year ago

Thanks for the response guys! Ok using Ethan's suggestion I can see it works in IE/FF but for some odd reason the output is empty in chrome. Anyway I've still been having issues, I think I'm missing something simple.. any ideas? This example only returns the else statement but looks to me to mimic Ethan's suggestion.. jsfiddle.net/sbignell/tjQ9s

SBignell Over a year ago

Actually i've just fixed it.. i didnt have the isHome function quite right, thanks alot Ethan your solution works and I'll take a look at the documentation too.

Ethan Selzer Over a year ago

Cool, I'm glad you got it working. In addition to the documentation at emberjs.com, the github wiki has a links page with some helpful articles and examples.

Panagiotis Panagi · Accepted Answer · 2012-07-08 20:32:41Z

That's because you are appending both views (homeView and editAccountView) manually with appendTo.

Also, avoid defining views within the App create() function. Therefore, create your App:

App = Ember.Application.create({
  ready: function() {
    App.MainView.create().append();
  }
});

where App.MainView is your top-level view defined by:

App.MainView = Ember.View.extend({
  templateName: 'main-view',

  selectedView: "Home",
  isHome: function() {
    this.get('selectedView') === 'Home'
  },

  homeView: Ember.View.extend({ 
    templateName: 'home-view'
  }),

  editAccountView: Ember.View.extend({ 
    templateName: 'edit-account'
  })
});

with the handlebars template:

<script type="text/x-handlebars" data-template-name="main-view">
  {{#if view.isHome}}
     {{view view.homeView}}
  {{else}}
    {{view view.editAccountView}}
  {{/if}}
</script>

Collectives™ on Stack Overflow

Ember.js handlebars if, else statement

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related