Ember.js - Render modal view with URL and parent view still displaying

Question

In my Ember.js application I have an index view with a list of various posts. I'm trying to implement a 'show' action that happens when a post is clicked on. What it should do is display a modal a more detailed version of the post. Each modal view for a post should also have its own URL. Also the index view that lists the posts should still be shown behind the post modal. Finally when the post modal is closed the URL should change back to the index URL

So far my routes are something like this:

App.Router.reopen 
  location: 'history'
  rootURL: '/'

App.Router.map ->
  @resource 'posts', ->
    @route 'show', path: '/:post_id'

App.PostsShowRoute = Ember.Route.extend
  model: (params) ->
    App.Post.find(params.post_id)

This is my modal view (using Zurb Foundation reveal modal)

App.PostsShowView = Ember.View.extend
  templateName: 'postModal'
  classNames: ['reveal-modal']

  didInsertElement: ->
    @$().foundation('reveal', 'open')

I'm rendering into an outlet into my index template, but with the current set it navigates away from my index template and renders the modal only. Once again I'd like to have the modal render within the index page with its own URL, and upon being closed go back to the index URL.

Answer 1

You can add an additional outlet to your application template for modals, and then render your modals into that outlet.

<script type="text/x-handlebars">
  {{outlet}}
  {{outlet modal}}
</script>

App.PostShow = Ember.Route.extend({
  renderTemplate: function() {
    this.render('postModal',{outlet:'modal',into:'application'});
  }
});