替换Ember.ArrayController.create()将无法解析归属关系|灰烬升级3.x [英] Replace Ember.ArrayController.create() will not resolve belongTo relationships | ember upgrade 3.x

问题描述

我正在升级过程中，由于ArrayController已过时，我遇到了问题.

I'm in the process of upgrading and I'm facing issues because ArrayController is being deprecated.

在旧的Ember 1.13路线中，我使用

In my old Ember 1.13 route I'm using

model/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,

}

serializer/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';
  }
} );

routes/announcement.js

 setupController: function( controller, model ) {

    this._super( ...arguments );

     var announcements = Ember.ArrayController.create( {

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

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

在路线公告的控制器中，如下:

In the controller of the route announcement, follows:

controller/announcement.js

publishedAnnouncements: Ember.computed( 'model.[]', '[e-mail]', '[e-mail]', 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以呈现所有公告，如

so in the template im running a for each loop to render all announcements like

templates/announcements.hbs

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

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

After the ember upgrade 3.5 I have changed these to the following:

model/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

// remove async true from profile

  author: DS.belongsTo( 'profile'),

  viewed: false,
  isNew: true,

}

serializer/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';
  }
} );

routes/announcement.js

setupController: function( controller, model ) {

    this._super( ...arguments );

     //removed arrayController from here and assigned model

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

controller/announcement.js

sortProperties:['publishedAt:desc']， sortedModel:compute.sort('model'，'sortProperties')，

sortProperties: ['publishedAt:desc'], sortedModel: computed.sort('model', 'sortProperties'),

publishedAnnouncements: Ember.computed( 'model.[]', '[e-mail]', '[e-mail]', 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;
  } ),

templates/announcements.hbs

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

然后announcement.author.firstname在ember 3.5中未定义 但是，如果它不是归属关系，那么它将存在(例如announcement.publishedAt)

Then the announcement.author.firstname is undefined in ember 3.5 but if it is not a belongsTo relationship it will be there (example announcement.publishedAt)

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

I have no clue what I missed or what I did wrong here.

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

I am attaching a screenshot here of a console log which I did in the controller published variable.

琥珀色1.13

灰烬3.5

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

your answers make me better understand the problem. the api returns a custom version of data thats why embeddedRecordsMixin used this is the api payload for course

{
  "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返回什么:

Have a look at what your API returns:

1. 启动您本地的Ember应用程序和API.
2. 在Chrome中打开localhost:4200.
3. 在开发工具中打开网络"标签.
4. 刷新页面以触发网络请求，我认为该请求位于您的路由的model()挂钩中.
5. 查看您的API返回的JSON.是否 JSON API 兼容?
6. 在琥珀色检查器中打开数据标签.
7. 请求发生后，您希望看到的作者在商店中有空吗?
8. 如果是，他有firstName还是未定义?

1. Spin up your local Ember app and API.
2. Open localhost:4200 in Chrome.
3. Open the network tab in dev tools.
4. Refresh the page to trigger the network request I assume is in your route's model() hook.
5. Look at the JSON returned by your API. Is it JSON API compliant?
6. Open the data tab in Ember Inspector.
7. After the request occurred, did the author you are expecting to see populate the store?
8. If yes, does he have firstName or is it undefined?

如果一切都是肯定的，那么我们可以排除请求，API和序列化程序方面的问题.

If all positive, then we can probably rule out issues with the request, API and serialisers.

看到此序列化器:

// 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的响应来说非常罕见.如果全部根据此规范:

The mixin EmbeddedRecordsMixin implies your API returns embedded data which is quite uncommon for JSON API compliant responses. This is the only serializer you will need if all according this spec:

// app/serializers/application.js

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

export default JSONAPISerializer.extend({});

来自您的API的数据应类似于:

The data coming from your API should be looking like:

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

这篇关于替换Ember.ArrayController.create()将无法解析归属关系|灰烬升级3.x的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！