How to make ember component fetch data from server. put AJAX call inside the component seems not a good practise to handle this

Question

An Ember Component needs to fetch data from serve, however i think put AJAX call inside the component is not a good practise.

Or use the Route to fetch data, then pass data to component.But the route's method can't share easily between different routes.

Answer 1

In general, you are right, it is not a good idea to put ajax calls in components. However, in a case where the data to be retrieved and displayed is intimately connected to the view--auto-completion could be one example--it should not be considered an anti-pattern.

If you think it is important to segregate the ajax call, you could consider using a {{render}} helper inside the component's template, and do the ajax work in a separate controller with an associated view where the results are displayed. Routes are not really relevant here because they are related to navigation and URLs.