使用 Ember 加载关系数据 2
Loading relationship data using Ember 2
我在使用 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"
}
}
}
}
我建议执行以下操作:
像现在一样在您的路线中加载项目。
将项目实例传递到组件中,而不是注入商店实例。
// 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.
上计算任何 属性
我测试了你的代码,是的,它不工作。只有当我在所有地方重命名模型 "item" 和 "items" 时它才有效。在我看来,Ember 数据不喜欢串联的模型名称...
因此,作为结论,我们应该在任何地方都使用简单的名称,或者必须找出确切的语法...驼峰式、破折号或 under_scored?
我在使用 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"
}
}
}
}
我建议执行以下操作: 像现在一样在您的路线中加载项目。 将项目实例传递到组件中,而不是注入商店实例。
// 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.
上计算任何 属性我测试了你的代码,是的,它不工作。只有当我在所有地方重命名模型 "item" 和 "items" 时它才有效。在我看来,Ember 数据不喜欢串联的模型名称...
因此,作为结论,我们应该在任何地方都使用简单的名称,或者必须找出确切的语法...驼峰式、破折号或 under_scored?