如何在Ember中处理和显示嵌套hasMany数据关系
问题：
我不知道如何处理，然后在组件中显示嵌套的Ember数据记录。
我不知道其他人是如何处理这个问题的，如果我错过了关于Ember的一些关键的东西，那就是防止这个问题。我认为，在我使用承诺的方式中，可能会出现一种奇怪的逻辑上的不可能，因为我显然不太理解它们。
背景：
我正在为一个体育比赛建立一个网络应用程序。比赛分为有活动的日子。运动员参加这些项目的比赛，他们的表现数据被存储在记录-notably得分-。
我需要在一天内显示一个记分牌。记分板实质上是一张当天每项赛事运动员的得分表。例如：
我尝试过的：
- 在控制器中以多种不同的方式实现类似的逻辑。
- 试着把逻辑移到路线上，但也遇到了类似的麻烦。
- 在网上搜索。
- 重建。
控制器代码(有缺陷的逻辑)：
app/components/data-entry-interface/day/scoreboard-interface-row.js
export default Component.extend({
store: Ember.inject.service(),
tagName: '',
eventScores: Ember.computed('day.events.@each.records.@each.{points,athlete.id}', async function () {
let day = this.get('day');
let eventScoresPromises = await day.get('events').map(async event => {
let recordsPromises = await event.get('records').map(record => record);
let records = await Promise.all(recordsPromises);
return await records
.filter(record => record.get('athlete.id') === this.get('athlete.id'))
.map(record => record.get('points'));
});
return await Promise.all(eventScoresPromises);
}),
});路由管理代码(仅供参考)：
app/router.js
Router.map(function () {
this.route('competition-list-interface');
this.route('data-entry-interface', {
path: '/data-entry-interface/competition/:competition_ID'
}, function () {
this.route('day', {
path: '/day/:day_ID'
},
function () {
this.route('scoreboard-interface', {
path: '/scoreboard'
});
});
});
});app/路由/数据输入-interface.js
async model(params) {
let competition = await this.store.findRecord('competition', params.competition_ID);
let days = await competition.get('days');
return {
competition: competition,
days: days,
}
}app/路由/数据-输入-接口/day.js
async model(params) {
let day = await this.store.findRecord('day', params.day_ID);
let competition = this.modelFor('data-entry-interface').competition;
return {
day: day,
athletes: competition.athletes,
competition: competition,
}
}app/routes/data-entry-interface/day/scoreboard-interface.js
model() {
let competition = this.modelFor('data-entry-interface').competition;
let day = this.modelFor('data-entry-interface/day').day;
let athletes = competition.get('athletes');
return Ember.RSVP.hash({
competition: this.modelFor('data-entry-interface').competition,
day: this.modelFor('data-entry-interface/day').day,
athletes: athletes,
});
},
setupController(controller, model) {
controller.set('model', model);
}模板代码(仅供参考)：
app/templates/data-entry-interface/day/scoreboard-interface.hbs
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<td>Athlete {{model.scoreBoardRows}}</td>
{{#each model.day.events as |event|}}
<td>Points for event: {{event.name}}</td>
{{/each}}
<td>Total points for day {{model.day.number}}</td>
<td>Positions for day {{model.day.number}}</td>
</tr>
</thead>
<tbody>
{{#each model.athletes as |athlete|}}
{{data-entry-interface/day/scoreboard-interface-row athlete=athlete day=model.day}}
{{/each}}
</tbody>
app/templates/components/data-entry-interface/day/scoreboard-interface-row.hbs
<tr>
<td>{{athlete.name}}</td>
{{#each eventScores as |eventScore|}}
<td>{{eventScore}}</td>
{{/each}}
<td>{{totalPointsForDay}}</td>
<td>{{overallPositionForDay}}</td>
</tr>技术细节：
- 使用FireBase存储数据并托管站点。我使用EmberFire (V2.0.9)库进行CRUD操作，它与内置的普通EmberData库(V3.1.0)一起工作。
- EmberCli是V3.1.4版，EmberSource是V3.1.0版
我做过的研究：
回答 1
Stack Overflow用户
发布于 2018-05-25 08:43:17
控制器中的计算函数有一个问题。要引用Ember文档中有关聚合计算属性的内容，请注意@每个文件只工作一个层次，不能使用嵌套形式，如todos.@each.owner.name或todos.@each.owner.@each.name。请看这里的Ember文档：代码-每一个代码。
除了那个错误，你所拥有的似乎是合理的.尽管我以前还没有使用过async model()方法来了解这是否也会带来复杂的后果。ember-concurrency可能是一个很好的选择，可以让您更好地控制数据。
https://stackoverflow.com/questions/50516542
复制相似问题
腾讯云开发者
