javascript - 替换Ember.ArrayController.create()将无法解析归属关系| Ember 升级3.x

我正在升级过程中，因为ArrayController已过时，所以我遇到了问题。

在我使用的旧Ember 1.13路线中

型号/announcement.js

export default DS.Model.extend( {


  id:DS.attr('string'),
  title: DS.attr( 'string' ),
  description: DS.attr( 'string' ),
  published: DS.attr( 'boolean' ),
  publishedAt: DS.attr( 'date' ),

  course: DS.belongsTo( 'course' ),
  author: DS.belongsTo( 'profile', { async: true } ),

  viewed: false,
  isNew: true,

}

序列化器/announcement.js

import DS from 'ember-data';
import ApplicationSerializer from 'mim/serializers/application';

export default ApplicationSerializer.extend( DS.EmbeddedRecordsMixin, {

  keyForRelationship: function( key ) {

    return key !== 'author' ? key : 'id';
  }
} );

路线/announcement.js

 setupController: function( controller, model ) {

    this._super( ...arguments );

     var announcements = Ember.ArrayController.create( {

          model: model,
          sortProperties: [ 'publishedAt' ],
          sortAscending: false
        } );

        controller.set( 'model', announcements );
  },

在路由公告的控制器中，如下：

控制器/announcement.js

publishedAnnouncements: Ember.computed( 'model.[]', '[email protected]', '[email protected]', function() {

    var published = this.get( 'model' ).filterBy( 'published', true ),
        announcements = Ember.A();

    announcements.pushObjects( published.filterBy( 'viewed', false ) );
    announcements.pushObjects( published.filterBy( 'viewed' ) );

    return announcements;
  } ),

所以在模板中我为每个循环运行一个a来渲染所有公告，例如

template / announcements.hbs

  {{#each publishedAnnouncements as |announcement|}}
        {{announcement.author.firstName}}
      {{/each}}

灰烬升级3.5之后，我将其更改为以下内容：

型号/announcement.js

export default DS.Model.extend( {

  id:DS.attr('string'),
  title: DS.attr( 'string' ),
  description: DS.attr( 'string' ),
  published: DS.attr( 'boolean' ),
  publishedAt: DS.attr( 'date' ),

  course: DS.belongsTo( 'course' ),

//从配置文件中删除异步true

  author: DS.belongsTo( 'profile'),

  viewed: false,
  isNew: true,

}

序列化器/announcement.js

import DS from 'ember-data';
import ApplicationSerializer from 'mim/serializers/application';

export default ApplicationSerializer.extend( DS.EmbeddedRecordsMixin, {

  keyForRelationship: function( key ) {

    return key !== 'author' ? key : 'id';
  }
} );

路线/announcement.js

setupController: function( controller, model ) {

    this._super( ...arguments );

     //removed arrayController from here and assigned model

        controller.set( 'model', model );
  },

控制器/announcement.js

sortProperties：['publishedAt：desc']，
  sortedModel：compute.sort（'model'，'sortProperties'），

publishedAnnouncements: Ember.computed( 'model.[]', '[email protected]', '[email protected]', function() {

   //getting model by local computed property defined above.arrayController sort is doing with above method by sortPropteries
   var published =this.get('sortedModel').filterBy( 'published', true);
        announcements = Ember.A();

    announcements.pushObjects( published.filterBy( 'viewed', false ) );
    announcements.pushObjects( published.filterBy( 'viewed' ) );

    return announcements;
  } ),

template / announcements.hbs

  {{#each publishedAnnouncements as |announcement|}}
        {{announcement.author.firstName}}
      {{/each}}

然后在余烬3.5中未定义announcement.author.firstname
但是，如果它不是belongsTo关系，那么它将存在（例如announcement.publishedAt）

我不知道我错过了什么或做错了什么。

我将在此处附加控制台日志的屏幕截图，该截图是我在控制器发布的变量中所做的。

灰烬1.13



灰烬3.5


您的回答使我更好地理解了问题。 api返回数据的自定义版本，这就是为什么EmbeddedRecordsMixin使用这是课程的api负载的原因

{
  "courses": [{
    "created_at": "2016-11-22T09:37:53+00:00",
    "updated_at": "2016-11-22T09:37:53+00:00",
    "students": ["01", "02"],
    "coordinators": ["001", "002"],
    "programme_id": 1,
    "announcements": [{
      "created_at": "2016-11-23T08:27:31+00:00",
      "updated_at": "2016-11-23T08:27:31+00:00",
      "course_id": 099,
      "id": 33,
      "title": "test announcement",
      "description": "please ignore",
      "published_at": "2016-11-23T08:27:31+00:00",
      "published": true
    }, {
      "created_at": "2016-11-25T07:13:18+00:00",
      "updated_at": "2016-11-25T07:13:18+00:00",
      "course_id": 04,
      "id": 22,
      "title": "test before ",
      "description": "test",
      "published_at": "2016-11-25T07:13:18+00:00",
      "published": true
    }]
}

最佳答案

从哪里开始调试：

看一下您的API返回的内容：


旋转您本地的Ember应用程序和API。
在Chrome中打开localhost：4200。
在开发工具中打开“网络”标签。
刷新页面以触发网络请求，我认为这是在路由的model()挂钩中。
查看您的API返回的JSON。是否符合JSON API标准？
在Ember Inspector中打开“数据”选项卡。
请求发生后，您希望看到的作者是否在商店中填充？
如果是，他是否有firstName或未定义？


如果一切顺利，那么我们可以排除请求，API和序列化程序的问题。

看到此序列化器：

// app/serializers/announcments.js

import DS from 'ember-data';
import ApplicationSerializer from 'mim/serializers/application';

export default ApplicationSerializer.extend( DS.EmbeddedRecordsMixin, {
  keyForRelationship: function( key ) {
    return key !== 'author' ? key : 'id';
  }
} );

mixin EmbeddedRecordsMixin表示您的API返回的嵌入数据对于JSON API兼容响应来说是非常罕见的。如果符合this spec的要求，这是唯一需要的序列化程序：

// app/serializers/application.js

import JSONAPISerializer from 'ember-data/serializers/json-api';

export default JSONAPISerializer.extend({});

来自API的数据应如下所示：

{
  "data": [{
    "type": "announcement",
    "id": "1",
    "attributes": {
      "message": "...",
    },
    "relationships": {
      "author": {
        "data": { "type": "profile", "id": "9" }
      },
    }
  }],
  "included": [{
    "type": "profile",
    "id": "9",
    "attributes": {
      "firstName": "John",
      "lastName": "Johnson"
    },
  }]
}