Ember加载JSON:API模型时中止Clock路由转场问题排查

你的clock路由转场被中止，核心原因是Ember Data无法正确把API返回的kebab-case属性映射到模型定义的camelCase属性。

Ember Data的JSONAPIAdapter默认要求后端返回的属性名和你在模型里写的完全一致：你模型里用的是technicalName、utcOffset（驼峰式），但API返回的是technical-name、utc-offset（短横线分隔），两者格式不匹配，导致数据无法被正确序列化到模型实例中，最终触发转场失败。

你需要创建一个JSON API序列化器，自动把API返回的kebab-case属性转换成Ember模型期望的camelCase格式。

步骤1：创建序列化器（全局或模型专属） #

如果要全局处理所有模型的属性转换，就创建serializers/application.js：

import DS from 'ember-data';
import { camelize } from '@ember/string';

export default DS.JSONAPISerializer.extend({
  normalizeResponse(store, modelClass, payload) {
    // 遍历API返回的每条数据，转换属性名格式
    payload.data.forEach(record => {
      const transformedAttrs = {};
      
      // 把每个kebab-case属性转成camelCase
      Object.entries(record.attributes).forEach(([key, value]) => {
        transformedAttrs[camelize(key)] = value;
      });
      
      record.attributes = transformedAttrs;
    });

    // 调用父类方法完成后续序列化流程
    return this._super(...arguments);
  },

  // 可选：如果需要把Ember的camelCase属性转成kebab-case发送给后端（比如POST/PUT请求）
  keyForAttribute(attr) {
    return attr.decamelize();
  }
});

如果只需要处理timezone模型，就创建serializers/timezone.js，代码和上面一致即可，这样只会作用于该模型。

为什么这样能解决问题？ #

这个序列化器会在Ember Data解析API返回数据前，把所有technical-name这类格式的属性名转换成technicalName，和你模型里定义的属性名完全匹配，这样Ember就能正确加载数据，转场也就不会被中止了。

确认你的适配器配置正确（你已经设置了host: 'http://localhost:3000'，这部分没问题），同时API返回的type字段是timezones，和模型名称的复数形式一致，这部分也是正确的。

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