How do you pull data from multiple models into a component/template/view?

Design
1

I am new to ember.js. I see the potential, but I am having some difficulty.

I have two questions.

  1. How do you pull in data from multiple models into a template?

    In other mvc frameworks I’d reference the additional models in my controller, but I haven’t seen any reference to this in the documentation. Is there a better/ember way of doing this?

  2. How get model data into a component when it isn’t on the default models template?

    I would like to make a component (or view?) that references a data set. I’d like to put that component on many different pages on the site. For example I’d like to display a side bar list of “top trending movies” on page about actors and movies and directors. The top trending movies would not relate directly to any of the base data sets.

2

For 1, you can load multiple models in the route. Copied from that answer:

App.IndexRoute = Ember.Route.extend({
  model: function() {
      return Ember.RSVP.hash({
          people: this.store.find('person'),
          companies: this.store.find('company')
      })
  }
});

You can refer to model.people and model.companies in the template, or create computed property aliases in the controller. You could also assign people and companies directly to the controller in setupController.

4 Likes
3

Thank you for the answer that solves both my problems. I was wondering though. Is there a way to make a component that is data driven that isn’t dependent on the current controller and route?

It would be like creating a mvc specifically for a component, so it could be controller agnostic?

4

Maybe an outlet in the application template, but that’s outside my realm of experience.

5

You could make a singleton service for the data source, and then inject it into the components or controllers. A good example of such a service pattern is the Continuous Redrawing of Views guide

2 Likes