Ember.js each helper does not display within a conditional

Question

Newbie Ember user - having problems displaying content in each loop within a conditional statement in the template. Without the conditional the content is listed fine.

I have the following templates:

 <script type="text/x-handlebars" data-template-name="application">
  {{view "App.MenuView" }}         
 </script>

  <script type="text/x-handlebars" data-template-name="menu">
  <div class="app-navbar">
   <ul class="app-nav">
   {{#link-to 'applications' tagName="li" href=false }}<a {{action "select_application" on="click"}} href="#nogo">Applications  <b class="caret"></b></a>  
    {{#if showApplications}}
    <ul class="app-subnav">
    {{#each view.content1}}
    <li ><a href="#" {{action "select"  this}}>{{title}}</a></li>
    {{/each}}
   </ul>
   {{/if}}
   {{/link-to}}
</script>

And here is my view and controller:

  App.MenuView = Ember.View.extend({
    templateName: 'menu',
    content1:[
        Ember.Object.create({title: 'google', href: 'google.com'}),
        Ember.Object.create({title: 'yahoo', href: 'yahoo.com'}),
        Ember.Object.create({title: 'bing', href: 'bing.com'})
    ]       
})

App.ApplicationController = Ember.ObjectController.extend({
  isActive : false,
  showApplications: false,
  actions:{
   select_application : function(e){
    this.toggleProperty('isActive');
    this.toggleProperty('showApplications');
  }
   select: function(e){
       console.log ('Do something here');
    }
  }
 })

Answer 1

It's just a guess from me and i am not sure, but the {{#if}} is actually a view. Therefore the part view.content1 access the "IfView" (do not know its correct name). And this view does not have the property. Actually i would not recommend to implement it this way. I have done this implementation style myself and this is how one would do it with a server side application (where it works fine).

I would instead do this:

<script type="text/x-handlebars" data-template-name="menu">
  <div class="app-navbar">
   <ul class="app-nav">
   {{#link-to 'applications' tagName="li" href=false }}<a {{action "select_application" on="click"}} href="#nogo">Applications  <b class="caret"></b></a>  

    <!-- Ember adds the class invisible when showApplications is false -->
    <ul {{bind-attr class=":app-subnav showApplications::invisible"}}>
    {{#each view.content1}}
    <li ><a href="#" {{action "select"  this}}>{{title}}</a></li>
    {{/each}}
   </ul>
   {{/link-to}}
</script>

Why do i think this is the better approach? When you toggle your property to show the list or not, Ember does not have to any rendering here. The DOM elements are still there and all Ember has to do is switching a HTML attribute, which is much faster. It is a more declarative way of doing things, which is encouraged by Ember.

For details on {{bind-attr}} , you may have a look at the docs .