如何在Ember

Question

问题：

我无法弄清楚如何处理然后在组件中显示嵌套的Ember数据记录。

我不知道其他人是如何处理这个问题的，如果我错过了关于Ember的一些关键因素，那就是防止这个问题。我认为，使用承诺的方式可能会出现一种奇怪的逻辑不可能性，因为显然我不能很好地理解它们。

背景

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

我需要在给定的一天显示记分牌。记分板基本上是当天每个赛事的运动员得分表。例如： 我尝试过的内容：

• 以多种不同的方式在控制器中实现类似的逻辑。
• 尝试将逻辑移到路线上但遇到了类似的麻烦。
• 搜索互联网。
• 重建。

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

应用/组件/数据输入接口/天/记分板接口-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);
  }),
});

路线管理代码（仅供参考）：

应用程序/ 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'
        });
      });
  });
});

应用程序/路由/数据输入-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,
    }
  }

应用程序/路由/数据输入接口/ 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,
    }
  }

应用程序/路由/数据输入接口/天/记分牌-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);
  }

模板代码（仅供参考）：

应用程序/模板/数据输入接口/天/记分板-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>

应用程序/模板/组件/数据输入接口/天/记分板接口-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关于聚合计算属性的文档＆＃34;注意@each只能深入一级。您不能使用嵌套表单，如todos。@ each.owner.name或todos。@ each.owner。@ each.name。＆＃34;请参阅此处的Ember文档：https://guides.emberjs.com/v3.1.0/object-model/computed-properties-and-aggregate-data/#toc_code-each-code。

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