Emberjs-1.0.0 template not displaying record

Question

In my ember app, the mail template only displays when the model passed to App.MailRoute is not filtered using filterProperty. This is the jsfiddle of the working version not filtered. Here is the jsfiddle that doesn't work after filtering with filterProperty. The template it uses is the The mail.handlebars template and it is pasted underneath the code showing the routes lower down in this question. However, when you comment out the setupControllers shown in the code for App.MailRoute, everything works as in the mail.handlebars template will display the record. But when you click the fist link in its parent template that is the mails.handlebars template, and then immediately click the 2nd link in the parents template, it will throw the error Uncaught TypeError: Cannot read property 'firstChild' of null. This seems to be caused by the async: hasMany association between the models. If I filter the content of App.MailRoute, it doesn't throw the error above when I click the 1st link and then immediately click the 2nd link but thought there is no error, the template doesn't display anything even when the console shows that the model was populated with the right data.

The router

App.Router.map(function() {
  this.resource('mails', function() {
    this.resource('mail', { path: ':id' });
  });
});

The App.MailsRoute

App.MailsRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('mail');    
  }
});

The App.MailRoute

 App.MailRoute = Em.Route.extend({
    setupController: function(controller, model) {
       console.log('model', model);

       a = this.controllerFor('mails').filterProperty('id', model.id);
       console.log('a', a);

      controller.set('model', a);
      console.log('model after setupcontroller', model);
    } 

 });

The mails.handlebars template

<script type='text/x-handlebars' data-template-name='mails'>
  <h6> from mails template </h6>
  {{#each item in  model}}
   {{#link-to 'mail' item }} {{item.name}} ( {{item.messages.length}} ) {{/link-to}}
  <br/>
  {{/each}}
  {{outlet}}
</script>

The mail.handlebars template

<script type='text/x-handlebars' data-template-name='mail'>
 <br/>

  {{log record}}
 {{controller}}
<h6> individual mail template </h6>

  {{type}} or {{name}}

  <div>
  <table>
  <tr>
  <th>From</th>
  <th>To</th>
  <th> Subject </th>
  <th> Body </th>
  <th>Date</th>
  </tr>

 {{#each messages}}

     <td>{{from}}</td>
     <td>{{to}}</td>
    <td>{{subject}}</td>
    <td>{{body}}</td>
     <td> {{date}}</td>
     <br/>
 {{/each}}
 </table>

  {{outlet}}
</div>

The App.Mail model

App.Mail = DS.Model.extend({
  name: DS.attr('string'),
  type: DS.attr('string'),
  messages: DS.hasMany('message', {async: true})
});

The App.Message Model

App.Message = DS.Model.extend({
  subject: DS.attr("string"),
  from: DS.attr("string"),
  to: DS.attr("string"),
  date: DS.attr('date'),
  body: DS.attr("string"),
  mail: DS.belongsTo('mail')
});

Answer 1

The real problem is the table. If you look at all of the data without the table structure it works. Adding everything back in you'll notice the
which breaks it. Remove that and you should be good.

Additionally you should implement the model hook or refresh won't work.

{{#each messages}}

    <td>{{from}}</td>
    <td>{{to}}</td>
    <td>{{subject}}</td>
    <td>{{body}}</td>
    <td>{{date}}</td>

{{/each}}

http://jsfiddle.net/fnU9z/3/