Jak uzyskać dostęp do globalnej zmiennej "App" Ember w aplikacji Ember CLI?

Question

Tworzę aplikację Ember przy użyciu interfejsu Ember CLI. Mam widok, który wywołuje komponent, który utworzyłem. Próbuję uzyskać dostęp do globalnej zmiennej App, aby utworzyć mój komponent i wstawić go do mojego układu.

Błąd: Uncaught ReferenceError: Aplikacja nie została zdefiniowana

Jak mogę rozwiązać ten problem?

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; 

punkt-table.js (to jest widokiem)

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

APP/komponenty/freestyle-chart.js

import Ember from 'ember'; 

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

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

Answer 1

Mogę wymyślić dwa sposoby. Pierwszym jest ręczne umieszczenie aplikacji w zasięgu globalnym.

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

Drugi importować aplikacji w widoku:

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

To ostatnie jest możliwe tylko wtedy, gdy Ember CLI obsługuje odniesienia okrągły. Oficjalna specyfikacja ES6 wspiera je, ale wiele transpilerów tego nie robi (moje nie).

Jednak nie sądzę, że to jest twój główny problem. W większości przypadków nie powinno się uzyskiwać dostępu do zmiennych globalnych w interfejsie Ember CLI. Zamiast umieszczać FreestyleChartComponent w przestrzeni nazw , dlaczego nie po prostu umieścić go w module i zaimportować tak jak każdy inny moduł? Globalne zmienne są nieuniknione (doświadczyłem tego dzisiaj), ale powinieneś spróbować je zminimalizować.

Answer 2

importu składnik, który chcesz:

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

Answer 3

zgadzam się, że nie powinno być dostępu do aplikacji za pośrednictwem globalnej przestrzeni nazw, jednak ember-cli faktycznie ma rzeczywiście sprawi, że app globalnym z nazwą aplikacji będąc nazwą zmiennej.

Jeśli otworzysz /app/index.html w projekcie ember-cli powinieneś zobaczyć script tag w kierunku dna, który wygląda jak ...

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

w powyższym przykładzie YourAppName będzie dostępny jako aplikacja globalna

Answer 4

Nie ma prostego sposobu, aby to zrobić, ponieważ Ember CLI chce, abyś użył publicznego interfejsu API i jego podanych składników zamiast bezpośredniego dostępu do instancji aplikacji.

Większość rozwiązań polega na tworzeniu globalnej instancji aplikacji, przy czym ta nie działa. Nie testowałem tego, ale myślę, że to powinno zadziałać:

appname/utils/application.js

export default { 
    instance: null 
}; 

appname/instancji inicjalizatory/application.js

import application from 'appname/utils/application'; 

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

Teraz

import application from 'appname/utils/application';

i używać application.instance w dowolnym pliku, gdzie trzeba instancję aplikacji.