Ember.js - Visualizzazione modale di rendering con URL e visualizzazione padre ancora visualizzata

Question

Nella mia applicazione Ember.js ho una vista indice con un elenco di vari post. Sto cercando di implementare un'azione "show" che si verifica quando si fa clic su un post. Quello che dovrebbe fare è mostrare una modale una versione più dettagliata del post. Anche ogni visualizzazione modale di un post dovrebbe avere il proprio URL. Anche la vista indice che elenca i post dovrebbe essere mostrata dietro il post modale. Infine, quando il palo modale viene chiusa l'URL dovrebbe tornare all'URL indice di

Finora miei percorsi sono qualcosa di simile:

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) 

Questa è la mia vista modale (usando ZURB Foundation rivelano modale)

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

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

Sto convertendo in una presa nel mio modello di indice, ma con il set corrente si allontana dal mio modello di indice e rende solo il modale. Ancora una volta mi piacerebbe avere il rendering modale all'interno della pagina indice con il proprio URL e, una volta chiuso, tornare all'URL dell'indice.

Answer 1

È possibile aggiungere una presa aggiuntiva al modello di applicazione per le modali e quindi eseguire il rendering delle modali in quella presa.

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

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