0

我在使用 Ember 2.0 加载关系数据时遇到了一些问题。鉴于以下两个模型，Project 和 LineItem，我试图列出属于给定项目的所有行项目：

export default DS.Model.extend({
    name: DS.attr(),
    organisation: DS.attr(),
    customer: DS.attr(),
    hours: DS.attr({defaultValue: 0}),
    line_items: DS.hasMany('line-item', {async: true})  
});

export default DS.Model.extend({
    name: DS.attr(),
    value: DS.attr({defaultValue: 1}),
    quantity: DS.attr({defaultValue: 1}),
    state: DS.attr({defaultValue: 'OPEN'}),
    project: DS.belongsTo('project')
});

在我的路线中，我毫无问题地加载了一个给定的项目：

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    model(params) {
        return this.store.findRecord('project', params.project_id);
    }
});

在我的组件中，然后我尝试按如下方式加载我的订单项：

从“ember”导入 Ember；

export default Ember.Component.extend({
    store: Ember.inject.service(),
    lineItems: function () {
        return this.get('project').get('line_items').toArray();
    }.property('project.line_items'),
});

但是，当我尝试在模板中迭代我的订单项时，什么也没有发生：

{{#each lineItems as |item|}}
   <tr>
     <td>
        <a href="#">{{item.name}}</a>
     </td>
   </tr>
{{/each}}

没有运气使用{{#each project.line_items as |item|}}。打印的输出this.get('project').get('line_items').toArray()显示一个空列表。

但是，正如预期的那样，我的项目包含行项目：

{  
   "data":{  
      "type":"projects",
      "id":"7d93633d-a264-4cb3-918c-82cc44cb76e2",
      "attributes":{  
         "created":"2016-04-04T19:02:03.113408Z",
         "modified":"2016-04-04T19:02:03.113511Z",
         "name":"Sample name",
         "hours":0
      },
      "relationships":{  
         "line_items":{  
            "meta":{  
               "count":1
            },
            "data":[  
               {  
                  "type":"LineItem",
                  "id":"01915d73-fde5-4b6f-8915-174c16592942"
               }
            ]
         }
      }
   }
}

...我的订单项：

      {
            "type": "line-items",
            "id": "01915d73-fde5-4b6f-8915-174c16592942",
            "attributes": {
                "created": "2016-04-04T19:02:15.622483Z",
                "modified": "2016-04-04T19:02:15.622534Z",
                "name": "Test Line Item",
                "value": 1,
                "quantity": 1
            },
            "relationships": {
                "project": {
                    "data": {
                        "type": "projects",
                        "id": "7d93633d-a264-4cb3-918c-82cc44cb76e2"
                    }
                }
            }
        }
4

2 回答 2

1

我测试了你的代码，是的，它不工作。只有当我在任何地方重命名模型“项目”和“项目”时它才有效。在我看来，Ember Data 不喜欢串联的模型名称......

所以，作为一个结论，我们应该在任何地方都使用简单的名称，或者必须弄清楚确切的语法......camelCase，dash-erized还是under_scored？

于 2016-04-06T11:45:31.880 回答
0

我建议执行以下操作：像现在一样将项目加载到您的路线中。将项目实例传递给组件，而不是注入存储实例。

// template which gets rendered after model() hook
...
{{#if model}}
  {{!-- pass the model into your component as 'project' --}}
  {{your-component project=model}}
{{/if}}
...

在您的组件模板中，您可以检查是否已加载异步加载的关系并在之后显示适当的部分：

// template which gets rendered by your component as the project instance is present 
{{#if project.line_items}} {{!-- #if project.lineItems --}}
  {{!-- iterate over line items and print their names --}}
  <ul>
  {{#each project.line_items as |item|}}
   <li>Line item name: {{item.name}}</li>
  {{/each}}
  </ul>
{{/if}}
...

如果一切顺利，这应该可以。您的组件不需要注入存储，也不需要 project.line_items 上的任何计算属性。

于 2016-04-05T08:09:38.570 回答