如何在Ember CLI应用程序中访问Ember全局"App"变量？

Question

我正在使用Ember CLI创建Ember应用程序.我有一个视图调用我创建的组件.我试图访问全局App变量来创建我的组件并将其插入我的布局.

错误:未捕获的ReferenceError:未定义App

我该如何解决？

app.js

import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';

Ember.MODEL_FACTORY_INJECTIONS = true;

var App = Ember.Application.extend({
  modulePrefix: 'client-web', // TODO: loaded via config
  Resolver: Resolver
});

loadInitializers(App, 'client-web');

export default App;

item-table.js(这是一个视图)

import Ember from 'ember';

export default Ember.View.extend({
    templateName: 'item-table',

    didInsertElement: function() {
        // All my other code here

        App.FreestyleChartComponent.create().appendTo($('#wp-chart td')); // This throws an error.
    }
});

应用/组件/自由式-chart.js之

import Ember from 'ember';

export default Ember.Component.extend({
    templateName: 'components/freestyle-chart',

    didInsertElement: function() {
        console.log('Inserted the component.');
    }
});

Answer 1

我可以想到两种方式.第一种是手动将App放在全局范围内.

var App = window.App = Ember.Application.extend();

第二种是将App导入您的视图:

import App from './path/to/app/file';

只有Ember CLI支持循环引用才能实现后者.官方ES6规范支持它们,但许多转发器不支持(我的不支持).

但是,我不认为这是你的根本关注.在大多数情况下,您不应该在Ember CLI中访问全局变量.相反放置的FreestyleChartComponent的App命名空间,为什么不把它放在一个模块中,并导入它像任何其他模块？全局变量是不可避免的(我今天经历过),但你应该尽量减少它们.