Ember - 初始加载时 hasMany 关系中没有数据答案

【问题标题】：Ember - No Data in hasMany Relationship On Initial LoadEmber - 初始加载时 hasMany 关系中没有数据
【发布时间】：2018-07-14 18:19:49
【问题描述】：

ember-cli - 3.20, ember-data - 3.30

我正在尝试在控制器设置中修改 hasMany 关系中的数据，但该关系没有数据。但是，页面完全加载后所有数据都在那里（即在我的模板/操作中，所有关系数据都在那里）

我有一个与问题多对多关系的测验应用程序。

models/Quiz.js

import { computed } from '@ember/object';
import DS from 'ember-data';

const { attr, hasMany, Model } = DS;

export default Model.extend({
  description: attr('string'),
  questions: hasMany('question', {async: true}) //also tried with async false

});

models/Question.js

export default Model.extend({
  question: attr('string'),
  quizzes: hasMany('quiz', {async: true}) //also tried with async false
});

转到 url '/quiz/1' 并路由调用 findRecord on quiz

路线/测验/quiz.js

import Route from '@ember/routing/route';

export default Route.extend({
  model(params) { return this.store.findRecord('quiz', params.quiz_id); }
});

controllers/quizzes/quiz.js

import { computed } from '@ember/object';
import Controller from '@ember/controller';

export default Controller.extend({
  quiz: computed.alias('model'),

  //also attempted in setupController/afterModel in router
  modelChanged: function() {
    let quiz = this.get('quiz');
    let questions = quiz.get('questions'); //questions has no data
    questions.then(questions => {
      Promise.all(questions.map(question => {
        //modify questions/answers here
      }));
    });
  }.observes('model')

actions: {
  getQuestions() {
    let questions = this.get('quiz.questions');  //questions now has data
  }
})};

我尝试在 setupController() 和 afterModel() 中获取问题数据，但没有成功。

注意：测验是嵌套的路线，能够在要显示的每个测验之间进行选择。因此，如果您从 '/quiz/1' 导航到 '/quiz/2' 然后返回 'quiz/1'，则问题数据在观察者、setupController、afterModel 等中可用。所以，第二次访问一个特定的测验，数据在设置中可用。（数据始终在模板/操作中可用）。

有什么想法吗？

【问题讨论】：

标签： javascript ember.js ember-data ember-cli

【解决方案1】：

临时解决方法：

在“quiz.questions”上使用观察者和标志来检查是否第一次点击观察者。

import { computed } from '@ember/object';
import Controller from '@ember/controller';

export default Controller.extend({
  quiz: computed.alias('model'),

  areAnswersSet: false,

  observeQuestions: function() {
    let questions = this.get('quiz.questions');
    if (!this.areAnswersSet && questions.length !== 0) {
      this.toggleProperty('areAnswersSet');
      questions.forEach(question => { //modify question });
    }
  }.observes('quiz.questions.[]')

缺点：观察者仍然会在每个问题发生变化时被调用。仅在初始加载时需要。

【讨论】：

由于问题关系是异步的，您也许还可以观察quiz.questions.isFulfilled，每次加载只运行一次（可能需要观察quiz.{questions,questions.isFulfilled} 以识别对不同model.questions 的更改）。或者在模型更改时动态添加quiz.questions.[] 的观察者，并在触发后将其删除。见addObserver/removeObserver。

【解决方案2】：

Ember Data 3.3.0 中存在一些与关系相关的错误。值得升级到 Ember Data 3.3.1 看看您的问题是否会消失...

【讨论】：