Ember.js - Rendern modale Ansicht mit URL und übergeordnete Ansicht weiterhin angezeigt

Question

In meiner Ember.js Anwendung habe ich eine Indexansicht mit einer Liste von verschiedenen Posts. Ich versuche eine "Show" -Aktion zu implementieren, die passiert, wenn auf einen Post geklickt wird. Was es tun sollte, ist eine modale, detailliertere Version des Posts anzuzeigen. Jede modale Ansicht für einen Beitrag sollte auch eine eigene URL haben. Auch die Indexansicht, in der die Posts aufgelistet sind, sollte immer noch hinter dem Postmodal angezeigt werden. Schließlich, wenn die Post modal die URL geschlossen wird, sollte auf den Index URL ändern zurück

Bisher meine Routen sind so etwas wie folgt aus:

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) 

Dies ist meine modalen Ansicht (mit ZURB Foundation modal ausklappen)

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

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

Ich bin Rendering in eine Steckdose in meine Indexvorlage, aber mit dem aktuellen Set navigiert es weg von meiner Indexvorlage und rendert nur das Modal. Noch einmal möchte ich das modale Rendering innerhalb der Indexseite mit einer eigenen URL haben und nach dem Schließen zurück zur Index URL gehen.

Answer 1

Sie können einen zusätzlichen Ausgang für Ihre Anwendung Vorlage für modals hinzufügen, und dann Modalverben in diesen Ausgang machen.

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

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