Ember - #each传递模型的实例

时间:2014-12-17 10:45:47

标签: ember.js ember-data ember-cli

对于小型网络应用,我尝试执行以下操作:

我有一个通过json api服务的对象列表(成就模型)

路由器

export default Ember.Route.extend({
    model:function(){
      return this.store.find('achievement');
     });
});

模型

export default DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
});

模板

     {{#each a in model}}
       <div>
          <h4>{{a.name}}</h4> 
          <p>{{a.description}}</p>
          <button {{action 'addThis'}}/>
       </div>
      {{/each}}

应用程序的设置是有一个成就列表。我想要一个数据库中的成就列表。每个登录的用户都可以使用按钮将自己的成就添加到他的个人资料中。如果用户登录,他应该看到所有成就的列表,但是他已经添加到他的个人资料中的那个应该具有绿色背景颜色并且该按钮被移除。我知道这可以用if语句等来完成。

问题是,如何将特定模型传递给控制器​​,以便将其记录到userprofile?我尝试了以下方法:

     <button {{action 'addThis' a}}/>

然后在控制器中

    actions: 
         addThis: function(obj){
              console.log(obj);
         });

记录对象,但不知怎的,我无法访问它以让我们说出要将其复制到用户配置文件的名称或ID。

我也不知道这是否是我尝试实现的最佳方法?

修改 我认为这与承诺有关。我可以看到数据记录在上面的console.log中。我只是不知道如何定位它。它包裹在_data中。我尝试使用afterModel来等待所有内容的加载,但这似乎无法正常工作。

1 个答案:

答案 0 :(得分:0)

你可以使用ItemController,例如它处理ArrayController中的每个项目,

e.g。

{{#each a in model  itemController="achievement"}}
       <div>
          <h4>{{a.name}}</h4> 
          <p>{{a.description</p>
          <button {{action 'addThis'}}/>
       </div>
{{/each}}

由于itemController是“achievement”,通过命名约定,控制器变为

App.AchievementController = Ember.ObjectController.extend({
 init: function() {

     var name = this.get('name');
     var description = this.get('description');
   }

});