Ember.js - 呈现带有 URL 的模态视图，父视图仍在显示

Question

在我的 Ember.js 应用程序中，我有一个包含各种帖子列表的索引视图。我正在尝试实现单击帖子时发生的“显示”操作。它应该做的是显示一个更详细的帖子版本。帖子的每个模式视图也应该有自己的 URL。此外，列出帖子的索引视图仍应显示在帖子模式后面。最后，当 post modal 关闭时，URL 应该变回索引 URL

到目前为止，我的路线是这样的：

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)

这是我的模态视图（使用 Zurb Foundation 显示模态）

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

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

我正在渲染到我的索引模板的插座中，但是使用当前设置它导航离开我的索引模板并仅渲染模式。再一次，我希望在索引页面中使用自己的 URL 呈现模式，并在关闭后返回索引 URL。

Answer 1

您可以为模态框的应用程序模板添加一个额外的插座，然后将您的模态框渲染到该插座中。

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

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