Ember.js Emberjs-1.0.0模板未显示记录

在我的会员应用程序中，邮件模板仅在传递给应用程序的模型未使用filterProperty过滤时显示。邮件路由。这是。这是。它使用的模板是mail.handlebar模板，它粘贴在代码下面，显示问题中较低的路线。但是，当您注释掉App.MailRoute代码中显示的设置控制器时，mail.handlebar模板中的所有内容都将显示该记录。但是，当您单击其父模板中的第一个链接（即Mail.Handlebar模板），然后立即单击父模板中的第二个链接时，它将抛出错误未捕获类型错误：无法读取空值的属性“firstChild”。这似乎是由于异步：在模型之间有许多关联造成的。如果我过滤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 = 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);
    } 

 });

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

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

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

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

 });

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

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

Mail.Handlebar模板

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

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

 });

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

<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 = DS.Model.extend({
  name: DS.attr('string'),
  type: DS.attr('string'),
  messages: DS.hasMany('message', {async: true})
});

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

---

您的问题是在此处分配数组：

controller.set('model', a);

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

---

我认为您需要使用findByProperty，这取决于您使用的余烬版本。可能是findBy为您工作

您的问题是在此处分配数组：

controller.set('model', a);

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

---

我认为您需要使用findByProperty，这取决于您使用的余烬版本。可能是findBy为您服务

真正的问题是表格。如果查看所有没有表结构的数据，它就可以工作。将所有内容重新添加到中，您会注意到
会破坏它。去掉这个，你就应该很好了

此外，您应该实现模型挂钩，否则刷新将无法工作

{{#each messages}}

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

{{/each}}

{{#每条消息}
{{from}}
{{to}}
{{subject}}
{{body}}
{{date}}
{{/每个}}

---

真正的问题是桌子。如果查看所有没有表结构的数据，它就可以工作。将所有内容重新添加到中，您会注意到
会破坏它。去掉这个，你就应该很好了

此外，您应该实现模型挂钩，否则刷新将无法工作

{{#each messages}}

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

{{/each}}

{{#每条消息}
{{from}}
{{to}}
{{subject}}
{{body}}
{{date}}
{{/每个}}

---

我认为您需要使用findByProperty，这取决于您使用的ember版本。可能是findBy为你工作。谢谢你的建议，请注意不是我否决了你。使用findBy是可行的，但它会让我回到那种情况，当我单击第一个链接并立即单击第二个链接时，我会得到未捕获的错误TypeError:无法读取null的“firstChild”属性。当然，别担心，很高兴其他人给了你正确的答案。哈哈，完全是我，这是一个意外，肩部手术让我用左手，我错过了，然后试图修复它，但它说我不能改变投票，除非它被编辑，所以我编辑了你的帖子，然后修复了它；）我认为您需要使用findByProperty，这取决于您使用的余烬版本。可能是findBy为你工作。谢谢你的建议，请注意不是我否决了你。使用findBy是可行的，但它会让我回到那种情况，当我单击第一个链接并立即单击第二个链接时，我会得到未捕获的错误TypeError:无法读取null的“firstChild”属性。当然，别担心，很高兴其他人给了你正确的答案。哈哈，完全是我，这是一个意外，肩部手术让我用左手，我错过了，然后试图修复它，但它说我不能改变投票，除非它被编辑，所以我编辑了你的帖子，然后修复了它；）非常感谢@kingpin2k。您知道标签导致该问题的原因吗。我不需要
标记，但我想我应该问一下您是否有任何关于学习的解释。在Ember中，表格很棘手，额外的标记似乎会破坏视图生成器。我不确定确切的原因。哎呀，我从一个类似的原因中得到了同样的错误——在一张桌子里：/morely thanks@kingpin2k。您知道标签导致该问题的原因吗。我不需要
标记，但我想我应该问一下您是否有任何关于学习的解释。在Ember中，表格很棘手，额外的标记似乎会破坏视图生成器。我不确定确切的原因。哎呀，我从一个类似的原因中得到了同样的错误——在一张桌子里：/