Emberjs-1.0.0 模板不显示记录

Question

在我的 ember 应用中，ma​​il 模板仅在传递给 App.MailRoute 的模型未使用 filterProperty 过滤时显示。这是 jsfiddle of the working version not filtered。这是jsfiddle that doesn't work after filtering with filterProperty。它使用的模板是 ma​​il.handlebars 模板，它被粘贴在显示此问题下方路线的代码下方。但是，当您注释掉 App.MailRoute 的代码中显示的 setupControllers 时，一切都会像 ma​​il.handlebars 模板 中那样显示记录。但是，当您单击其父模板（即 ma​​ils.handlebars 模板）中的第一个链接，然后立即单击父模板中的第二个链接模板，它会抛出错误Uncaught TypeError: Cannot read property 'firstChild' of null。这似乎是由模型之间的 async: hasMany 关联引起的。如果我过滤App.MailRoute的内容，当我点击第一个链接然后立即点击第二个链接时不会抛出上述错误strong> 但认为没有错误，即使控制台显示模型填充了正确的数据，模板也不会显示任何内容。

路由器

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

App.MailsRoute

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

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

 });

ma​​ils.handlebars 模板

<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>

ma​​il.handlebars 模板

<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>

App.Mail 模型

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

App.Message 模型

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

真正的问题是桌子。如果您在没有表结构的情况下查看所有数据，它会起作用。将所有内容重新添加，您会注意到
破坏了它。删除它，你应该会很好。

此外，您应该实现模型挂钩，否则刷新将不起作用。

{{#each messages}}

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

{{/each}}

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

Answer 2

你的问题是你在这里分配一个数组：

controller.set('model', a);

a是一个数组，filterProperty返回一个数组，你只需要传递一个元素。

我认为您需要使用 findByProperty，这取决于您使用的 ember 版本。 findBy 可能适合你