具有自己数据源的可重用余烬组件

Question

I have a dropdown <select> -based component that I'd like to be able to drop into any template in the hierarchy of my ember app.

This displays a list of all the Articles (the model) on the site. Whenever I use this component though, the route that I'm in needs to load the data and get passed to the template.

Question : How can I load this data once and only when the component is rendered?

Also I've been reading this and still have yet to come up with a good solution. I'd like the component to provide the data source, but that seems to be frowned upon.

Would it be terrible to just do an ajax request in my component pre-render?

Answer 1

If you are going to need data preloaded then you can use the initializers to do that for you. You can use this data and inject to any controller , route or all of them if you want. This is a more maintainable way.

For your case you can have a particular controller have articles injected into. Then use this controller data using needs in other required controllers and thus into components.

In this way you have data available for all instance of component. Passing an store object inside the component is mostly an anti-pattern ( depends upon use cases though ) .

Component should be free from headache of data gathering and should focus on logic and presentation.

If want to know more about how to use initializers you can find it here