巴贝尔正在出口“这个”作为未确定的计算财产 [英] babel is exporting "this" as undefined in ember computed property

问题描述

使用 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
    })
});

麻烦的是，这个从来没有设置模型。为什么是这种情况？

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

这篇关于巴贝尔正在出口“这个”作为未确定的计算财产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！