Ember.js - displays a modal view with a URL and parent view

Question

In my Ember.js application, I have an index list with a list of different posts. I am trying to implement the “show” action that occurs when a click is clicked. What he should do is show a modal more detailed version of the message. Each type of message mod must also have its own URL. The index view, which lists the messages, should also be displayed behind the modality. Finally, when post modal is closed, the URL should return to the index URL

So far, my routes have been 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 the Zurb Foundation shows modality)

 App.PostsShowView = Ember.View.extend templateName: 'postModal' classNames: ['reveal-modal'] didInsertElement: -> @$().foundation('reveal', 'open') 

I turn the output file into my index template, but with the current set it moves from my index template and displays only the modal. Once again, I want the modal rendering on the index page with its own URL, and after closing, return to the index URL.

Answer 1

You can add an additional output to the application template for modals, and then visualize your modals in this outlet.

 <script type="text/x-handlebars"> {{outlet}} {{outlet modal}} </script> App.PostShow = Ember.Route.extend({ renderTemplate: function() { this.render('postModal',{outlet:'modal',into:'application'}); } });