javascript - Emberjs #each 循环不适用于数组数据

Question

我只是想循环遍历我生成的一些虚拟数据，这样我就可以设置网站的样式，我的路由器中有这个:

import Ember from 'ember';

export default Ember.Route.extend({
  chatMessages() {
      return [{
      username: "John Doe",
      message: "Blah Blah Blah",
      dispic: "http://www.proirrigationwi.com/images/unknown_user.png"
    }]
  },
  activate() {
    this.controllerFor('chatroom').subscribe();
  }
});

然后在我的index.hbs

    {{#each chatMessages as |chatMessage|}}
      {{chat-message username=chatMessage.username message=chatMessage.message dispic=chatMessage.dispic}}
    {{else}}
      {{chat-message username="System" message="There are currently no chat messages, feel free to start talking! Someone will join eventually" dispic="asd"}}
    {{/each}}

但我只看到过 else 语句。任何信息都会非常感谢

Answer 1

目前您的路线设置不正确，您必须以路线模型返回聊天消息:

import Ember from 'ember';

export default Ember.Route.extend({
  chatMessages: [{
      username: "John Doe",
      message: "Blah Blah Blah",
      dispic: "http://www.proirrigationwi.com/images/unknown_user.png"
  }],
  model(){
    return this.get('chatMessages')
  },
  activate() {
    this.controllerFor('chatroom').subscribe();
  }
});

现在您可以在模板中访问它，如下所示:

{{#each model as |chatMessage|}}
  {{chat-message username=chatMessage.username message=chatMessage.message dispic=chatMessage.dispic}}
{{else}}
  {{chat-message username="System" message="There are currently no chat messages, feel free to start talking! Someone will join eventually" dispic="asd"}}
{{/each}}

这是我为您设置的 twiddle。然后，再次阅读指南的 this section 很重要，因为它在路线方面更详细地解释了模型 Hook ，而 this part 则解释了如何在 Controller 上设置它。