Let’s create an app with 3 models, User, Post and SpecialPost. They are all defined with the ES6 class/extends
syntax thanks to ember-decorators
.
// models/user.js
import DS from 'ember-data';
import { hasMany } from '@ember-decorators/data';
const { Model } = DS;
export default class UserModel extends Model {
@hasMany() posts;
}
// models/post.js
import DS from 'ember-data';
const { Model } = DS;
export default class PostModel extends Model {}
// models/special-post.js
import Post from './post';
export default class SpecialPostModel extends Post {}
When trying to assign a special-post
to a user, I get an error:
const post = this.store.createRecord('special-post');
return this.store.createRecord('user', {posts: [post]});
// => Assertion Failed: You cannot add a record of modelClass 'special-post' to the 'user.posts' relationship (only 'post' allowed)
Since SpecialPost is a subclass of Post, I thought this would automatically work…
One workaround I’ve found is to declare SpecialPost this way:
// models/special-post.js
import Post from './post';
// note the Post.extend() part
export default class SpecialPostModel extends Post.extend() {}
Unfortunately, this works under Ember 3.1 but does not under 3.2 (see Ember 3.2 + ember-decorators subclassing bug)
Here is a repo reproducing the bug:
How can I assign a special-post to a user only using ES6 class syntax without the extends Post.extend()
hack?