Ember.js消费JSON API时数组内连字符属性访问返回undefined的解决

Ember Data默认会把JSON里的连字符命名属性自动转换成驼峰式命名，所以你碰到的is-expired、is-unlimited这类属性，在Ember里得用驼峰式名称访问，具体分两种场景：

1. 模板中访问 #

遍历membershipBenefits数组时，直接用驼峰式属性名即可：

{{#each @model.membershipBenefits as |benefit|}}
  <p>是否过期：{{benefit.isExpired}}</p>
  <p>是否无限：{{benefit.isUnlimited}}</p>
{{/each}}

2. JS代码中访问（控制器/组件/路由） #

在JS逻辑里同样使用驼峰式调用：

// 示例：控制器中遍历数组
this.model.membershipBenefits.forEach(benefit => {
  console.log('过期状态：', benefit.isExpired);
  console.log('无限状态：', benefit.isUnlimited);
});

特殊情况：手动指定属性映射 #

如果因为业务需求需要保留原连字符属性的映射关系，可以给数组对应的子模型手动定义属性，指定key参数匹配JSON里的字段：

// 主模型文件 app/models/your-model.js
import Model, { hasMany } from '@ember-data/model';

export default class YourModel extends Model {
  @hasMany('membership-benefit', { async: false }) membershipBenefits;
}

// 子模型文件 app/models/membership-benefit.js
import Model, { attr } from '@ember-data/model';

export default class MembershipBenefitModel extends Model {
  @attr('boolean', { key: 'is-expired' }) isExpired;
  @attr('boolean', { key: 'is-unlimited' }) isUnlimited;
  // 其他普通属性按正常方式定义即可
}

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