Passing functions that return data into components

@chrisdpeters wrote:

Is there a way for the route to define data that could be loaded, but only if needed, on-demand? For example, perhaps the route could define functions that return promises that components could run if they needed the data?

So in the route:

export default Ember.Route.extend({
  fetchWidgets() {
    return this.store.findAll('widget');
  }
});

Then in the template:

{{! We don't need to load the data if the widgets aren't showing }}
{{#if showWidgets}}
  {{list-widgets widgetData=fetchWidgets}}
{{/if}}

Then in the component (as an arbitrary example, as I guess all of this is):

export default Ember.Component.extend({
  willRender() {
    this.get('widgetData')().then((widgets) => {
      this.set('widgets', widgets);
    });
  }
});

I haven't checked to see if this actually works but was playing with the idea/concept. The reason why I like this idea is that at least the definition of the API call is in the route, instead of putting it into the middle components after injecting the store service. Even though the API call is run by the component, at least the code for it is defined in the route.

Does this describe an anti-pattern or other Ember sin? Or is there some baked-in way to accomplish what I'm describing? I realize that this could be a total newbie question, and I'm OK with that.

Posts: 1

Participants: 1

Read full topic