ember.js - babel is exporting "this" as undefined in ember computed property

Question

using [email protected] and [email protected].

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 trouble is that _this is never set the the model. Why is this the case?

Answer 1

Babel is exporting it as undefined because the context you are preserving using the fat 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 are passing options to DS.Model the object does not exist yet.

export default DS.Model.extend({
    name: DS.attr('string'),

    displayName : Ember.computed('name', function() {
      return this.get('name');
    })
});

On an unrelated note, since you're using ember let's make use of ES6 destructuring to make the code look 'nicer':

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');
    })
});