Ember.js保存关联模型问题：提交表单未携带关联模型数据

我来帮你排查这个问题——加载关联数据正常但提交时没带上，通常是Ember Data的序列化配置或模型关联的保存策略没到位，咱们一步步来解决：

1. 先确认模型的关联定义是否正确 #

首先得保证page.js、event.js、choice.js的关联关系配置准确，Ember Data才能正确追踪关联数据：

// app/models/page.js
import Model, { attr, hasMany } from '@ember-data/model';

export default class PageModel extends Model {
  @attr() guestId;
  @attr() name;
  @attr() email;
  @attr() address;

  // 注意设置正确的inverse，确保和event/choice模型的关联匹配
  @hasMany('event', { inverse: 'page', async: false }) events;
  @hasMany('choice', { inverse: 'page', async: false }) choices;
}

// app/models/event.js
import Model, { belongsTo } from '@ember-data/model';

export default class EventModel extends Model {
  // 和page模型的hasMany对应
  @belongsTo('page', { inverse: 'events' }) page;
  // 其他属性...
}

如果关联的inverse不匹配，Ember Data可能无法识别哪些关联数据需要随主模型一起提交。

2. 自定义序列化器，强制包含关联数据 #

默认的JSONAPISerializer不会自动把关联数据加入POST/PUT请求，你需要自定义page的序列化器来指定要提交的关联：

// app/serializers/page.js
import JSONAPISerializer from '@ember-data/serializer/json-api';

export default class PageSerializer extends JSONAPISerializer {
  serialize(snapshot, options) {
    let json = super.serialize(snapshot, options);
    
    // 手动添加events关联的ID列表
    if (snapshot.hasMany('events')) {
      json.data.relationships = json.data.relationships || {};
      json.data.relationships.events = {
        data: snapshot.hasMany('events', { ids: true }).map(id => ({
          type: 'events',
          id: id
        }))
      };
    }

    // 同样处理choices关联
    if (snapshot.hasMany('choices')) {
      json.data.relationships = json.data.relationships || {};
      json.data.relationships.choices = {
        data: snapshot.hasMany('choices', { ids: true }).map(id => ({
          type: 'choices',
          id: id
        }))
      };
    }

    return json;
  }
}

如果你的后端支持JSON:API的include参数，也可以简化配置：

// app/serializers/page.js
import JSONAPISerializer from '@ember-data/serializer/json-api';

export default class PageSerializer extends JSONAPISerializer {
  include = ['events', 'choices'];
}

// 同时在adapter里配置
// app/adapters/page.js
import JSONAPIAdapter from '@ember-data/adapter/json-api';

export default class PageAdapter extends JSONAPIAdapter {
  include = ['events', 'choices'];
}

3. 确保关联数据已加载/正确关联 #

如果你的关联是async: true，提交前一定要保证关联数据已经加载完成，否则Ember Data无法获取到关联的ID：

// 比如在控制器/组件的保存方法里
async savePage() {
  let page = this.model.page;
  
  // 等待关联数据加载完成
  await page.events;
  await page.choices;
  
  // 如果是新建的event/choice，要先关联到page上
  // page.events.pushObject(newEvent);
  
  await page.save();
}

4. 调试验证 #

可以在序列化器的serialize方法里加console.log(json)，查看生成的请求数据是否包含relationships部分；也可以用Ember Inspector的Data标签，检查page模型的关联是否正确设置。

提交后的请求数据应该和后端返回的格式一致，类似这样：

{
  "data": {
    "type": "pages",
    "id": "12345",
    "attributes": {
      "guest_id": null,
      "name": "测试名称",
      "email": "test@example.com",
      "address": "测试地址"
    },
    "relationships": {
      "events": {
        "data": [{"type": "events", "id": "67890"}]
      },
      "choices": {
        "data": [{"type": "choices", "id": "11223"}]
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者chrizonline