modal-routing

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  /*openModal: function(modal, opts) {
      this.controllerFor(modal).set('model', opts);
      return this.render(modal, {
        into: 'application',
        outlet: 'modal'
      });
    },
    closeModal: function() {
      return this.disconnectOutlet({
        outlet: 'modal',
        parentView: 'application'
      });
    }*/
});

controllers.posts.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
  	openPost(post) {
      this.set('post', post);
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('posts', {path: 'posts'}, function() {
    this.route('modal', {path: ':post_id'});
  });
  this.route('post', {path: 'posts/:post_id'});
});

export default Router;

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  redirect() {
  	this.transitionTo('posts');
  }
});

routes.post.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
  	return Ember.Object.create({
			id: params.post_id + 1
		});
  }
});

routes.posts.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	const models = new Array(6).fill(0).map((v,k) => {
			return Ember.Object.create({
				id: k+1
			});
		});
		return Ember.RSVP.Promise.resolve(Ember.A(models));
  }
});

templates.application.hbs

<p>We have two routes: <code>posts</code> and <code>post</code>.</p>

<p>When you visit a post from /posts it should open in a modal. This works.</p>

<p>But wait, there's a twist! Opening a post in a modal should also update the URL so if you refresh the user will land on the <code>post</code> route.</p>

{{outlet}}

templates.components.post-item.hbs

Post {{post.id}}

{{yield}}

templates.post.hbs

<h2>/post</h2>
{{post-item post=model}}

templates.posts.hbs

<h2>/posts</h2>

{{#each model as |post|}}
	<div class="Post">
    {{#link-to "posts.modal" post}}
      {{post-item post=post}}
    {{/link-to}}
  </div>
{{/each}}

{{outlet}}

templates.posts.modal.hbs

<h3>modal</h3>
{{post-item post=model}}

twiddle.json

{
  "version": "0.10.6",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {}
}