Как получить доступ к глобальной переменной App App Ember в приложении Ember CLI?

Я создаю приложение Ember с использованием Ember CLI. У меня есть представление, которое вызывает компонент, который я создал. Я пытаюсь получить доступ к глобальной переменной приложения, чтобы создать свой компонент и вставить его в свой макет.

Ошибка: Неподготовлено 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.');
    }
});

Ответ 1

Я могу думать о двух путях. Первое заключается в том, чтобы вручную разместить приложение в глобальной области.

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

Вторая задача - импортировать приложение в ваше представление:

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

Последнее возможно только в том случае, если Ember CLI поддерживает циклические ссылки. Официальная спецификация ES6 поддерживает их, но многие транспиляторы не работают (у меня нет).

Однако я не думаю, что это ваша главная проблема. По большей части вам не следует обращаться к глобальным переменным в Ember CLI. Вместо размещения FreestyleChartComponent в пространстве имен App, почему бы просто не поместить его в модуль и не импортировать его, как в любой другой модуль? Глобальные переменные неизбежны (я испытал это сегодня), но вы должны попытаться свести их к минимуму.

Ответ 2

Я согласен с тем, что вы не должны получать доступ к своему приложению через глобальное пространство имен, однако ember-cli на самом деле фактически делает для вас приложение глобальным, при этом имя вашего приложения является именем переменной.

Если вы открываете /app/index.html в своем проекте ember-cli, вы должны увидеть тег script в нижней части, который выглядит как...

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

в приведенном выше примере YourAppName будет вашим приложением доступным как глобальное

Ответ 3

Импортируйте необходимый компонент:

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

Ответ 4

Нет прямого способа сделать это, так как Ember CLI хочет, чтобы вы использовали публичный API и его компоненты, а не напрямую обращались к экземпляру приложения.

Большинство решений состоят в том, чтобы сделать экземпляр приложения глобальным, в котором этого нет. Я не тестировал это, но я думаю, что это должно работать:

имя_приложения/Utils/application.js

export default {
   instance: null
};

имя_приложения/экземпляр-инициализаторы/application.js

import application from 'appname/utils/application';

export default {
  name: 'app-initializer',
  initialize: function (application) {
     application.instance = application;
  }
};

Теперь

import application from 'appname/utils/application';

и используйте application.instance в любом файле, где вам нужен экземпляр приложения.