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

in ember.js application have index view list of various posts. i'm trying implement 'show' action happens when post clicked on. should display modal more detailed version of post. each modal view post should have own url. index view lists posts should still shown behind post modal. when post modal closed url should change index url

so far routes 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 modal view (using zurb foundation reveal modal)

app.postsshowview = ember.view.extend   templatename: 'postmodal'   classnames: ['reveal-modal']    didinsertelement: ->     @$().foundation('reveal', 'open') 

i'm rendering outlet index template, current set navigates away index template , renders modal only. once again i'd have modal render within index page own url, , upon being closed go index url.

you can add additional outlet application template modals, , render modals outlet.

<script type="text/x-handlebars">   {{outlet}}   {{outlet modal}} </script>  app.postshow = ember.route.extend({   rendertemplate: function() {     this.render('postmodal',{outlet:'modal',into:'application'});   } });