1

我正在升级，我遇到了一些问题，因为 ArrayController 已被弃用。

在我使用的旧 Ember 1.13 路线中

模型/公告.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';
  }
} );

路线/公告.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.[]', 'model.@each.published', 'model.@each.viewed', 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;
  } ),

所以在模板中我为每个循环运行一个来呈现所有公告，比如

模板/公告.hbs

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

在 ember 升级 3.5 之后，我将这些更改为以下内容：

模型/公告.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' ),

// 从配置文件中删除 async 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';
  }
} );

路线/公告.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: computed.sort('model', 'sortProperties'),

publishedAnnouncements: Ember.computed( 'model.[]', 'model.@each.published', 'model.@each.viewed', 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;
  } ),

模板/公告.hbs

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

然后announcement.author.firstname在 ember 3.5 中未定义，但如果它不是 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
    }]
}
4

2 回答 2

1

Ember 被设计为与后端无关。使用序列化程序，您可以转换来自传入服务器响应的所有 JSON 以适应 Ember 数据存储。同样，您使用适配器来转换传出的服务器请求以适应您的后端。

我建议阅读此文档：

https://guides.emberjs.com/release/models/customizing-serializers/

然后选择：

于 2018-11-12T10:33:26.920 回答
1

从哪里开始调试：

看看你的 API 返回什么：

  1. 启动您的本地 Ember 应用程序和 API。
  2. 在 Chrome 中打开 localhost:4200。
  3. 在开发工具中打开网络选项卡。
  4. 刷新页面以触发我认为在您的路由model()挂钩中的网络请求。
  5. 查看 API 返回的 JSON。它是否符合JSON API ？
  6. 在Ember Inspector中打开数据选项卡。
  7. 请求发生后，您希望看到的作者是否填充了商店？
  8. 如果是，他有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';
  }
} );

mixinEmbeddedRecordsMixin意味着您的 API 返回嵌入的数据，这对于 JSON API 兼容的响应来说是非常罕见的。如果全部符合此规范，这是您需要的唯一序列化程序：

// 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"
    },
  }]
}
于 2018-11-12T06:28:20.533 回答