babel 正在导出“this"在 ember 计算属性中未定义 [英] babel is exporting "this" as undefined in ember computed property

问题描述

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

源 emberjs 模型

Source emberjs model

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 从来没有设置模型.为什么会这样?

The trouble is that _this is never set the the model. Why is this the case?

推荐答案

Babel 将其导出为未定义，因为您使用粗箭头函数保留的上下文未定义.

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

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

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

在不相关的说明中，由于您使用的是 ember，让我们利用 ES6 解构使代码看起来更好":

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

这篇关于babel 正在导出“this"在 ember 计算属性中未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！