Come accedere alla variabile 'App' globale di Ember in un'applicazione CLI Ember?

Question

Sto creando un'applicazione Ember utilizzando la CLI di Ember. Ho una vista che richiama un componente che ho creato. Sto cercando di accedere alla variabile App globale per creare il mio componente e inserirlo nel mio layout.

L'errore: Uncaught ReferenceError: App non è definito

Come posso risolvere questo problema?

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; 

articolo-table.js (Questa è una vista)

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

Posso pensare a due modi. Il primo è quello di inserire manualmente l'applicazione nell'ambito globale.

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

Il secondo è quello di importare l'app nella vostra vista:

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

Quest'ultima è possibile solo se Ember CLI supporta riferimenti circolari. Le specifiche ufficiali di ES6 le supportano ma molti transporter non lo fanno (il mio no).

Tuttavia, non penso che questa sia la vostra preoccupazione principale. Per la maggior parte, non si dovrebbe accedere a variabili globali in Ember CLI. Invece di collocare lo FreestyleChartComponent nello spazio dei nomi App, perché non inserirlo in un modulo e importarlo come qualsiasi altro modulo? Le variabili globali sono inevitabili (l'ho sperimentato oggi), ma dovresti cercare di minimizzarle.

Answer 2

Importare il componente che si desidera:

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

Answer 3

Sono d'accordo che non si dovrebbe essere accede vostra applicazione tramite il namespace globale, tuttavia ember-cli realtà fa effettivamente fare APP a livello globale con il nome della vostra applicazione essendo il nome della variabile.

Se si apre /app/index.html nel progetto ember-cli si dovrebbe vedere un tag script verso il fondo che sembra ...

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

nell'esempio di cui sopra YourAppName sarebbe la vostra applicazione disponibile come globale

Answer 4

Non esiste un modo semplice per farlo poiché la CLI di Ember vuole che tu usi l'API pubblica e i suoi componenti dati piuttosto che accedere direttamente all'istanza dell'app.

La maggior parte delle soluzioni consiste nel rendere globale l'istanza App, laddove questa non lo è. Non ho provato questo, ma penso che questo dovrebbe funzionare:

appname/utils/application.js

export default { 
    instance: null 
}; 

appname/istanza-inizializzatori/application.js

import application from 'appname/utils/application'; 

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

Ora

import application from 'appname/utils/application';

e utilizzare application.instance in qualsiasi file in cui è necessario l'istanza dell'applicazione.