Wie greife ich auf die Ember globale 'App'-Variable in einer Ember CLI-Anwendung zu?

Question

Ich erstelle eine Ember-Anwendung mit der Ember-CLI. Ich habe eine Ansicht, die eine von mir erstellte Komponente aufruft. Ich versuche, auf die globale App-Variable zuzugreifen, um meine Komponente zu erstellen und sie in mein Layout einzufügen.

Der Fehler: Uncaught Reference: App ist nicht

definiert

Wie kann ich dieses Problem beheben?

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 (Dies ist eine Ansicht)

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/Komponenten/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

Ich kann mir zwei Möglichkeiten vorstellen. Die erste besteht darin, die App manuell in den globalen Bereich zu setzen.

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

Die zweite ist die App in die Ansicht zu importieren:

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

Letzteres ist nur möglich, wenn Ember CLI zirkuläre Referenzen unterstützt. Die offizielle ES6-Spezifikation unterstützt sie, aber viele transpilers nicht (meins nicht).

Allerdings glaube ich nicht, dass dies Ihre Hauptsorge ist. Zum größten Teil sollten Sie nicht auf globale Variablen in Ember CLI zugreifen. Anstatt den FreestyleChartComponent im Namespace App zu platzieren, warum sollte man ihn nicht einfach in ein Modul stecken und wie jedes andere Modul importieren? Globale Variablen sind unvermeidbar (das habe ich heute erlebt), aber Sie sollten versuchen, sie zu minimieren.

Answer 2

Import die Komponente, die Sie wollen:

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

Answer 3

ich, dass Sie Ihre App über den globalen Namespace nicht zugreifen, aber ember-cli tatsächlich macht tatsächlich App Sie ein globales mit dem Namen der App stimmen sollte ist der Name der Variablen.

Wenn Sie /app/index.html in Ihrem ember-cli Projekt öffnen sollten Sie einen script Tag nach unten hin sehen, die wie ...

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

im obigen Beispiel sehen YourAppName Ihre Anwendung als globales

Answer 4

zur Verfügung stehen würde

Es gibt keine direkte Möglichkeit, dies zu tun, da die Ember-CLI möchte, dass Sie die öffentliche API und ihre Komponenten verwenden, anstatt direkt auf die App-Instanz zuzugreifen.

Die meisten Lösungen bestehen darin, die App-Instanz global zu machen, wobei dies nicht der Fall ist. Ich habe das nicht getestet, aber ich denke, das sollte funktionieren:

appname/utils/application.js

export default { 
    instance: null 
}; 

appname/Instanz-Initialisierer/application.js

import application from 'appname/utils/application'; 

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

Jetzt

import application from 'appname/utils/application';

und verwenden application.instance in jeder Datei, wo Sie die Anwendungsinstanz benötigen.