渲染在Ember.js中有很多数据

时间:2013-12-11 16:13:15

标签: javascript ember.js

我有一个users模型的应用程序,如下所示 -

App.User = DS.Model.extend({
  name         : DS.attr(),
  email        : DS.attr(),
  comments       : DS.hasMany('comment'),

});

App.User.FIXTURES = [{
  id: 1,
  name: 'Jane Smith',
  email: 'janesmith@thesmiths.com',
  comments: ["1", "2"]

}, {
  id: 2,
  name: 'John Dorian',
  email: 'jd@sacredheart.com',
  comments: ["1", "2"]
}

];

一个user模板,用于显示有关单个用户的详细信息,如下所示 -

<script type = "text/x-handlebars" id = "user">
<div class="user-profile">
 {{#if deleteMode}}
            <div class="confirm-box">
                <h5>Really?</h5>
                <button {{action "confirmDelete"}}> yes </button>
                <button {{action "cancelDelete"}}> no </button>
            </div>
            {{/if}}

  <h2>{{name}}</h2>
  <span>{{email}}</span>
  <ul>
  {{#each user.comments}}
  <li>{{user.comments}}</li>
  {{/each}}
  </ul>

  <button {{action "edit"}}>Edit</button>
<button {{action "delete"}}>Delete</button>
</div>

{{outlet}}

</script>

我的问题是用户评论没有显示在页面上。任何人都可以告诉我我做错了什么,对Ember来说很新。感谢。

1 个答案:

答案 0 :(得分:1)

假设

App.Comment = DS.Model.extend({
  comment      : DS.attr(),
});

你有评论的夹具数据

范围已更改,因此每个内容中的this是评论

{{#each user.comments}}
  <li>{{comment}}</li>
  or
  <li>{{this.comment}}</li>
{{/each}}


{{#each comment in user.comments}}
  <li>{{comment.comment}}</li>
{{/each}