Ember中如何处理和显示嵌套的hasMany数据关系

Question

问题：

我不知道如何处理并在组件中显示嵌套的 Ember 数据记录。

我不知道其他人如何解决这个问题，以及我是否遗漏了有关 Ember 的一些重要信息，这些信息可以防止这个问题。我认为我使用 Promise 的方式可能会发生奇怪的逻辑上的不可能性，因为显然对它们的理解不够好。

背景：

我正在为体育比赛构建一个网络应用程序。比赛分为有事件的日子。运动员参加这些赛事，他们的表现数据存储在记录中——尤其是得分——。

我需要显示给定日期的记分牌。记分牌本质上是当天每个项目的运动员得分表。例如： 我的尝试：

• 以多种不同方式在控制器中实现类似的逻辑。
• 尝试将逻辑移至路由，但遇到了类似问题。
• 上网搜索。
• 正在重建。

控制器代码（有缺陷的逻辑）：

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/routes/data-entry-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/routes/data-entry-interface/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 版本

我所做的研究：

• A similar question 除了它们只是显示嵌套数据
• A post 这似乎几乎正是我所需要的，但似乎对我不起作用
• A post 解释类似问题的承诺

Answer 1

控制器中的计算函数存在问题。引用 Ember 文档中关于聚合计算属性的内容“请注意，@each 只能工作一层深。您不能使用嵌套形式，如 todos.@each.owner.name 或 todos.@each.owner.@each.name。”在此处查看 Ember 文档：https://guides.emberjs.com/v3.1.0/object-model/computed-properties-and-aggregate-data/#toc_code-each-code。

除了那个错误之外，你所拥有的似乎是有道理的......虽然我之前没有使用过async model() 方法来了解这是否也会造成并发症。 ember-concurrency 可能是让您更好地控制数据的好选择。