babel在ember计算属性中将"this"导出为undefined

Question

使用ember-cli@0.2.7和emberjs@1.13.2.

来源emberjs模型

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

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

翻译模型

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

麻烦的是_this永远不会设置模型.为什么会这样？

Answer 1

Babel将其导出为未定义,因为您使用胖箭头功能保留的上下文未定义.

您目前拥有的内容与以下内容之间没有区别:

let options = {
    name: DS.attr('string'),

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

这种情况下的上下文是未定义的.您正在DS.Model向该对象传递选项尚不存在.

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

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

在一个不相关的说明中,因为你正在使用ember let使用ES6解构来使代码看起来更"漂亮":

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