Question

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

错误：未捕获的ReferenceError：未定义应用

我该如何解决这个问题？

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

第二种是将应用程序导入您的视图：

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

后者仅在Ember CLI支持循环引用时才可用。官方的ES6规范支持它们，但许多发布者都不支持（我的没有）。

但是，我不认为这是你的根本关注点。在大多数情况下，您不应该在Ember CLI中访问全局变量。而不是将FreestyleChartComponent放在App命名空间中，为什么不将它放在一个模块中并像其他任何模块一样导入它？全局变量是不可避免的（我今天经历过这种情况），但你应该尽量减少它们。

Answer 2

我同意你不应该通过全局命名空间访问你的应用程序，但ember-cli实际上确实让你的应用程序成为全局应用程序名称是变量的名称。

如果您在/app/index.html项目中打开ember-cli，您应该会在底部看到script标记，看起来像......

<script>
  window.YourAppName = require('your-app-name/app')['default'].create(YourAppNameENV.APP);
</script>

上面示例中的

YourAppName将是您的应用程序，可用作全局

Answer 3

导入所需的组件：

import FreestyleChartComponent from 'app_name/app/components/freestyle-chart';

Answer 4

经过Ember 3.7测试。

import App from 'app-name/app';

app-name必须替换为您应用的名称（我想是package.json中的名称）。

如何访问Ember global＆＃39; App＆＃39; Ember CLI应用程序中的变量？

4 个答案: