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'});
  }
});

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

1 个答案: