Ember.js - renderowanie widoku modalnego z widokiem adresu URL i nadrzędnego wciąż wyświetlającym się

Question

W mojej aplikacji Ember.js mam widok indeksu z listą różnych wpisów. Próbuję zaimplementować akcję "show", która ma miejsce po kliknięciu postu. Powinien wyświetlić modalny bardziej szczegółową wersję postu. Każdy widok modowy posta powinien mieć również własny adres URL. Również widok indeksu z listą postów powinien być nadal wyświetlany za postem. Wreszcie, gdy modalne po zamknięciu URL powinien wrócić do adresu URL indeksu

Dotychczas moje drogi są czymś tak:

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) 

To mój modalne widoku (przy użyciu ZURB Fundacja odsłonić modalna)

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

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

Wczytuje się do ujścia do mojego szablonu indeksu, ale z bieżącym zestaw odsuwa się od mojego szablonu indeksu i renderuje tylko modalny. Jeszcze raz chciałbym mieć render modalny na stronie indeksu z własnym adresem URL, a po zamknięciu wrócić do adresu URL indeksu.

Answer 1

Możesz dodać dodatkowe ujście do szablonu aplikacji dla modałów, a następnie wyrenderować swoje modały w tym gniazdku.

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

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