0

My router has paths setup for listing wallpapers. The index shows a list of wallpapers. There is also a categorized list of wallpapers. And lastly, there's a page for viewing a specific wallpaper.

The paths are setup like this:

  1. /wallpapers/ list of wallpapers
  2. /wallpapers/:category_id/ list of wallpapers for specific category
  3. /wallpapers/:category_id/:wallpaper_id/ Single wallpaper page

Entries in both 1 and 2 show 3 after a click.

Now I want 3 to be a modal that pops up with the previous route in the background. I can get this to work using either 1 or 2 as parent. But if I want to do this for both, I need to completely duplicate the route, controller, template and model for 3, because the router map automatically looks for the route/template/model/controller in specific directories. Any attempt to use the existing controller for both places causes it to work for one route only, or throw an error saying that the model was not found.

How can I use the same route/controller/template/model combo for the modal to be used in both 1 and 2?

Router.map(function() {
    this.route('wallpapers', function() {
        this.route('index', { path: '/' }, function() {                         // All wallpapers
            this.route('wallpaper', { path: ':category_id/:wallpaper_id' })     // Modal dialog
        })
        this.route('category', { path: ':category_id' }, function() {           // Categorized wallpapers
            this.route('wallpaper', { path: ':wallpaper_id' })                  // Modal dialog
        })
    })
})
  1. Note that I prefer to keep the paths this way for reasons of preserving existing links.
  2. Note that the modal dialog can be reached from route 1 and route 2, but the modal itself has the same route regardless. Refreshing the page and losing state can cause the parent to switch. This is fine. I prefer the categorized list (2) to be the default parent.
Redsandro
  • 11,060
  • 13
  • 76
  • 106
  • Those routes essentially are all the same URL. index.wallpaper has the same url as category.wallpaper and wallpaper. A direct link-to may work but you cannot access anything other than the root index and category via a url. I suggest remapping your router for starters for consistent behavior. – BrandonW Sep 26 '17 at 23:16
  • @BrandonW The first two are indeed identical, as pointed out in pont 2 at the bottom of the post. The last one was left erroneously. I've edited it out. So basically there are two different lists of wallpapers, and one modal dialog that should be available from both parent routes. – Redsandro Sep 28 '17 at 10:12
  • Ah, I didn't understand the question. I misread modal as model. – BrandonW Sep 28 '17 at 13:28
  • I do not think this can be achieved without duplicating the route/controller/template, especially if you want to preserve links. But you could do it with a component. A component could behave more like a model, and it could be re-used. Or you could try minimizing the duplication by using a single controller. see https://stackoverflow.com/questions/16331690/emberjs-sharing-a-controller-template-for-different-routes?rq=1 – BrandonW Sep 28 '17 at 13:48

0 Answers0