Ember CLI uygulamasında Ember global 'App' değişkenine nasıl erişirim?

Question

Ember CLI kullanarak bir Ember uygulaması oluşturuyorum. Oluşturduğum bir bileşeni çalan bir görünüm var. Bileşenimi oluşturmak ve onu düzenime eklemek için global App değişkenine erişmeye çalışıyorum.

hatası: Yakalanmayan ReferenceError: App bunu düzeltmek nasıl

tanımlanmamıştır?

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; 

madde table.js (bu bir görünüştür)

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

uygulama/bileşenler/serbest-chart.js app.js

import Ember from 'ember'; 

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

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

Answer 1

İki yol düşünebilirim. Birincisi, Uygulamayı genel kapsamda manuel olarak koymaktır.

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

ikinci senin görünüme App yüklemektir: Kor CLI dairesel başvurular destekliyorsa

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

ikincisi mümkündür. Resmi ES6 özelliği onları destekliyor ancak birçok aktarıcı bunu yapmıyor (benim değil). Bununla birlikte, bunun senin kökeni olduğunu düşünmüyorum. Çoğunlukla, Ember CLI'de global değişkenlere erişmemelisiniz. App ad boşluğuna FreestyleChartComponent yerleştirmek yerine, neden sadece bir modüle koyup başka bir modül gibi içe aktarmıyorsunuz? Küresel değişkenler kaçınılmazdır (bugün tecrübe ettim), fakat bunları en aza indirmeye çalışmalısınız.

Answer 2

İthalat istediğiniz bileşen:

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

Answer 3

Ben genel ad aracılığıyla uygulamanıza erişim gerektiğini katılıyorum, ancak ember-cli aslında uygulamanızın adını taşıyan bir küresel app yapmak aslında yok değişkenin adı olmak. Yukarıdaki örnekte YourAppName yılında

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

küresel

Answer 4

olarak kullanılabilir uygulama olacağını

Eğer benziyor alt kısmına doğru bir script etiketi görmelisiniz sizin ember-cli projede /app/index.html açarsanız

...

Ember CLI, uygulama örneğine doğrudan erişmek yerine, genel API'yi ve onun verilen bileşenlerini kullanmanızı istediğinden bunu yapmanın hiçbir ileriye doğru yolu yoktur.

Çoğu çözüm, Uygulama örneğini global yapmaktan oluşur; Bunu test etmedim, ancak bunun işe yarayacağını düşünüyorum:

appname/utils/application.js

export default { 
    instance: null 
}; 

appname/örnek-ilklendiriciler/uygulama örneği gereken herhangi dosyada Şimdi

import application from 'appname/utils/application';

ve kullanımı application.instance

import application from 'appname/utils/application'; 

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

application.js.