I'd like to implement a Pinterest style modal page for items (images/items/posts/etc...). Whichever page you are on, when you click on a item a modal with the item details pops up, and the page (feed) where you are from still sits in the background. The url in the address bar changes so you can link to the item from other sites or share it to your friends. And when you close the item modal your still at the feed.
Does Ember support this type of routing?
I know react-router has support for it, so I imagine Ember would as well as it is heavily inspired by Ember-router.
Source: https://github.com/rackt/react-router/tree/master/examples/pinterest
"The url /pictures/:id can potentially match two routes, it all depends on if the url was navigated to from the feed or not."
"Click on an item in the feed, and see that it opens in an overlay. Then copy/paste it into a different browser window (Like Chrome -> Firefox), and see that the image does not render inside the overlay. One URL, two session dependent routes and UI :D"
Linked Ember.js discussion: http://discuss.emberjs.com/t/pinterest-style-routes/8487
I think there is no such native behavior since one path will match one route, but it can be managed with some outlets and conditional display and nested routing.
The following router will provide almost everything needed to perform what you want:
// router.js
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
this.route('pictures', function() {
this.route('picture', {
path: '/picture/:picture_id',
resetNamespace: true
});
});
});
export default Router;
With route nesting, you should be able to display the pictures list if provided by the pictures route (and show link to single result), choose single picture display (popup vs single result) based on the presence or not of the results (picture route can access pictures model with this.modelFor('pictures')), and still get the benefits of the identifiable resource URL pattern.
YMMV, but you can also juggle with the picture's route renderTemplate method to render the result in specific outlet if you want to completely separate single picture rendering from pictures tree.
EDIT: link to react example is broken, did you mean https://github.com/rackt/react-router/tree/master/examples/pinterest?