Babel exports "this" as undefined to ember computed property

Question

using ember-cli@0.2.7 and emberjs@1.13.2 .

Source emberjs model

 export default DS.Model.extend({ name: DS.attr('string'), displayName : Ember.computed('name', () => { return this.get('name'); }) }); 

Translated model

 'use strict'; var _this = undefined; exports['default'] = DS['default'].Model.extend({ name: DS['default'].attr('string'), displayName: Ember.computed('name', function () { return _this.get('name'); //at this point _this is undefined }) }); 

The problem is that this is never set by the model. Why is this so?

Answer 1

Babel exports it as undefined, because the context that you save with the thick arrow function is undefined.

There is no difference between what you have at the moment and the following:

 let options = { name: DS.attr('string'), displayName : Ember.computed('name', () => { return this.get('name'); }) }; console.log(this); // undefined export default DS.Model.extend(options); 

The context in this case is undefined. You pass the DS.Model parameters, the object does not exist yet.

 export default DS.Model.extend({ name: DS.attr('string'), displayName : Ember.computed('name', function() { return this.get('name'); }) }); 

In an unrelated note, since you are using ember, let them use ES6 destructuring to make the code look “better”:

 import Ember from 'ember'; import DS from 'ember-data'; const { computed } = Ember; const { attr, Model } = DS; export default Model.extend({ name: attr('string'), displayName : computed('name', function() { return this.get('name'); }) });