CODEWITHSUNDEEP
templatesember.jsroutes
Gregg
Gregg

Reputation: 35904

Rendering Template / Components from multiple routes on single Template

I've been pouring over the docs for Ember and while they are well done, they seem to be lacking from a cookbook persective of bringing all the pieces together. If I have a list of items that can be added to my cart, I am trying to build a page that lists the items (this is done and working) but I want a sidebar that shows all the items in my cart.

I have the following routes:

export default Router.map(function() {
    this.route('index');
    this.route('items');
    this.route('cart');
});

export default Ember.Route.extend({
    model() {
        return this.store.find('item');
    }
});

export default Ember.Route.extend({
    model() {
       return this.store.find('cart');
    }
});

Now, I'm at a loss as to how to show both my items and my cart on a single template; in essence, calling 2 routes for a single template/

Upvotes: 1

Views: 89

Answers (2)

Frank Treacy
Frank Treacy

Reputation: 3716

This is a good case for using data-fetching components.

In my opinion, the data retrieved via a route is the one guided by the URL (in your case I suspect it's items). The cart is more of a URL-independent state.

I would build a CartComponent that has its own store instance injected as a service.

Incidentally, I recently wrote about this exact situation. If you are interested in pursuing this route (no pun intended!) check out http://emberigniter.com/should-components-load-data/

Upvotes: 2

QuantumLicht
QuantumLicht

Reputation: 2183

you can use modelFor to refer to another route's model within your route.

For instance, you can do the following:

model: function() {
   return Object.create({
     cart: this.store.find('cart'),
     items: this.modelFor('item')
   });
}

Link to documentation: http://emberjs.com/api/classes/Ember.Route.html#method_modelFor

Upvotes: 1

Related Questions