Search code examples
javascriptember.jsmodal-dialogember-router

Decide on route-basis what outlet to render into


So I've got two different outlets in my Handlebars markup. One outlet is unnamed {{outlet}} and one is named {{outlet modal}} (I've implemented a modal like in the Ember Cookbook).

One requirement for the app I'm making is that things that show up in the modal should be linkable. For instance, the resource 'cars' should show up there. I can figure out how to make a link to /cars/52 and have it render in that outlet, but how do I make a route rule like that?

How can you say a route (like /cars/:car_id) render in a specific outlet?


Solution

  • Be careful, when you start rendering to different outlets you need to be sure that the outlet is also being rendered (aka that it's a parent of the current route, such as application).

    App.CarsRoute = App.Route.extend({
      renderTemplate: function() {
        this.render('cars', {   // the template to render
          into: 'application',          // the route to render into
          outlet: 'modal',              // the name of the outlet in the route's template
          controller: 'cars'        // the controller to use for the template
        });
      }
    });
    

    http://emberjs.com/guides/routing/rendering-a-template/