Question

在我的余烬应用中，邮件模板仅在未使用filterProperty过滤传递给 App.MailRoute 的模型时显示。这是 jsfiddle of the working version not filtered 。这是 jsfiddle that doesn't work after filtering with filterProperty 。它使用的模板是 mail.handlebars模板，它粘贴在代码下方，显示此问题中较低的路线。但是，当您注释 App.MailRoute 代码中显示的 setupControllers 时，一切正常， mail.handlebars模板将显示记录。但是当您点击其父模板中的第一个链接 mails.handlebars 模板时，然后立即点击父级中的第二个链接模板，它将抛出错误未捕获的TypeError：无法读取属性'firstChild'为null 。这似乎是由 async：模型之间的hasMany关联引起的。如果我过滤 App.MailRoute 的内容，当我点击第一个链接然后立即点击第二个链接时，它不会抛出上述错误但是认为没有错误，即使控制台显示模型填充了正确的数据，模板也不会显示任何内容。

路由器

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

 });

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

mail.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适合你

Emberjs-1.0.0模板不显示记录

2 个答案: