Best way to render a model at multiple routes at a fixed position?

Ember CLI
1

Hello,

I’ve got 3 routes:

  • login
  • products
  • products/:productID

Obviously, “products” shows a list of product models while “products/:productID” shows the details of a product in the outlet of the “products” route. So far so good.

I’m now trying to add a “Cart block” to both routes, each time at the same position. If the Cart block could just be its own route with the model “order” and some actions like “addToCart” and “checkout” this would be perfect. However, I guess there’s no way to inject a route into others, is it?

In application.hbs are two outlets “left” and “right”. The products nested routes are rendered within left, while the cart should always show up in “right”.

How would you solve this problem the ember way?

2

How about putting the cart route behind the products route.

Something like this in your router

this.route('cartable', {path: ''},  function(){ 
  this.route('products', function(){
     this.route('product', path: ':productID');
  });
});

I haven’t played much with outlets but my current understanding is that you could can render to multiple outlets from the same route in this case your cartable route would render a simple {{outlet}} template for your product stuff and the other would be your cart template.

3

If you try render your cart in right outlet of application in different routes maybe you should create mixin for this purpose. My try in solving this problem you can see here. Also I think that good solution for this general purpose object as cart is getting model for it in ApplicationRoute. IMHO

4

Why do you use outlets for this? More easy way for this conditionally render cart component with order model from application and outlet for other inner routes:

{{#if cartIsVisible}}
    {{shop-cart order=model.order}}
{{/if}}
{{outlet}}
5

Thank you guys for your ideas on saturday evening! :smile:

Both solutions are sounding good. I’ll try the component approach first as this doesn’t require to change the route structure and may be even more flexible. I’m really wondering why I didn’t get the idea by myself :hushed: