Làm cách nào để truy cập biến 'Ứng dụng' toàn cầu của Ember trong ứng dụng Ember CLI?

Question

Tôi đang tạo một ứng dụng Ember bằng cách sử dụng Ember CLI. Tôi có một cái nhìn mà gọi một thành phần mà tôi tạo ra. Tôi đang cố gắng truy cập vào biến ứng dụng toàn cầu để tạo thành phần của tôi và chèn nó vào bố cục của tôi.

Lỗi: ReferenceError chưa gặp: Ứng dụng chưa được định nghĩa

Làm thế nào để sửa lỗi này?

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; 

mục-table.js (Đây là một cái nhìn)

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

Tôi có thể nghĩ ra hai cách. Đầu tiên là đặt ứng dụng trong phạm vi toàn cầu theo cách thủ công.

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

Thứ hai là để nhập khẩu các App vào xem của bạn:

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

Sau đó chỉ có thể nếu Ember CLI hỗ trợ tham chiếu vòng tròn. ES6 spec chính thức hỗ trợ chúng nhưng nhiều transpilers không (của tôi không).

Tuy nhiên, tôi không nghĩ đây là mối quan tâm gốc của bạn. Đối với hầu hết các phần, bạn không nên truy cập các biến toàn cục trong Ember CLI. Thay vì đặt FreestyleChartComponent trong không gian tên App, tại sao không chỉ đặt nó vào một mô-đun và nhập nó như bất kỳ mô-đun nào khác? Các biến toàn cầu là không thể tránh khỏi (tôi đã trải qua ngày hôm nay), nhưng bạn nên cố gắng giảm thiểu chúng.

Answer 2

nhập các thành phần mà bạn muốn:

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

Answer 3

Tôi đồng ý rằng bạn không nên truy cập vào ứng dụng của bạn thông qua không gian tên toàn cầu, tuy nhiên ember-cli thực sự không thực sự làm cho bạn app một toàn cầu với tên của ứng dụng của bạn là tên của biến.

Nếu bạn mở /app/index.html trong dự án ember-cli của bạn, bạn sẽ thấy một thẻ script về phía dưới trông giống như ...

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

trong ví dụ trên YourAppName sẽ là ứng dụng của bạn có sẵn như là một toàn cầu

Answer 4

Không có cách nào thẳng về phía trước để làm điều này vì Ember CLI muốn bạn sử dụng API công cộng và các thành phần được cung cấp của nó thay vì truy cập trực tiếp vào cá thể Ứng dụng.

Hầu hết các giải pháp bao gồm việc tạo phiên bản ứng dụng toàn cầu, theo đó, phiên bản này không có. Tôi đã không kiểm tra điều này, nhưng tôi nghĩ rằng điều này sẽ hoạt động:

appname/utils/application.js

export default { 
    instance: null 
}; 

appname/Ví dụ-initializers/application.js

import application from 'appname/utils/application'; 

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

Bây giờ

import application from 'appname/utils/application';

và sử dụng application.instance trong bất kỳ tập tin mà bạn cần ví dụ ứng dụng.