Ember.js - 渲染模态视图,URL和父视图仍然显示

Question

在我的Ember.js应用程序中,我有一个索引视图,其中包含各种帖子的列表.我正在尝试实现点击帖子时发生的'show'操作.它应该做的是显示一个模式更详细的帖子版本.帖子的每个模态视图也应该有自己的URL.列出帖子的索引视图仍应显示在帖子模式后面.最后,当关闭帖子模式时,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'});
  }
});