2

假设我有这样的路线图：

App.Router.map ->
    @resource 'posts', ->
        @resource 'post', {path: '/:post_id'}

所以我有一个关于/posts路线的帖子列表和一个关于posts/2. 默认情况下posts，模板将被渲染到{{outlet}}父模板 ( application) 中，这是可以的，而post模板到模板中{{outlet}}，posts这不是我想要的。我想用一个帖子替换帖子列表。

所以我提出了这个解决方案来设置所需的模板来渲染它{{outlet}}：

App.PostRoute = Em.Route.extend
    renderTemplate: ->
        this.render(into: 'application')

但结果我有帖子列表和单个帖子呈现为一个{{outlet}}. 我可以清空{{outlet}}每条新路线，但它会中断返回按钮，因为 Ember 不会再次渲染以前的模板，假设已经渲染。

所以问题是如何将 single{{outlet}}用于不同的路线并且不破坏 ember 的逻辑。当然，我可以避免嵌套路由，但是当您需要这样的语义链接时，它们非常有用post/2/comment/12/edit。

4

2 回答 2

3

如果你的模板没有嵌套，你就不应该嵌套你的路由，否则你最终会与 Ember 发生冲突。作为 Ember 的状态管理器，路由描述了您的应用程序结构。嵌套应该遵循您的 UI，而不是您希望 URL 的样子。

如果您关心的是 URL，您可以修改path以满足您的需要：

App.Router.map ->
  @resource 'posts'
  @resource 'post', { path: 'posts/:post_id' }
于 2013-05-12T18:40:39.133 回答
0

即使我的路由是嵌套的，我用于处理嵌套和非嵌套模板的方法是使用命名插座。Ember 让这一切变得非常简单。

我有一个顶级菜单出口，它始终包含与所访问路线相关的菜单。

示例应用程序模板：

<div id="nav">
  {{partial "nav"}}
</div>
<div id="menu">
  {{outlet "menu"}}
</div>
<div id="main">
  {{outlet}}
</div>
{{outlet "modal"}}

我有两个命名的出口，“菜单”和“模式”，它们用于保存不嵌套但被嵌套路由或任何精确路由使用的内容。任何路由都可以将响应动作的模式渲染到全局“模态”出口，类似地，任何路由都可以将菜单渲染到“菜单”出口。

我的示例使用咖啡脚本。

路由器：

App.Router.map ->
  @resource "posts", ->
    @route "create"
    @resource "post", {path: ':id'}, ->
      @resource "comments", {path: ':id'}, ->
        @route "create"
      @resource "comment", {path: ':id'}, ->

将菜单呈现到未嵌套的命名出口的路由：

App.PostsIndexRoute = Em.Route.extend
  renderTemplate: (controller, model)->
    # default render
    @_super arguments...
    # render posts menu into the application menu outlet
    @render "posts.menu",
      outlet: "menu"
      into: "application"

App.CommentsIndexRoute = Em.Route.extend
  renderTemplate: (controller, model)->
    # default render
    @_super arguments...
    # render comments menu into the application menu outlet
    @render "comments.menu",
      outlet: "menu"
      into: "application"

您不必像上面那样进行默认的嵌套渲染，您可以只定义一个始终渲染到命名插座的路由类型，例如“内容”（只是不要称它为“主”，因为 Ember 使用它）。

App.ContentRoute = Em.Route.extend
  renderTemplate: (controller, model)->
    @render outlet: "content", into: "application"

然后从它子类化任何应该始终呈现到应用程序“内容”出口的路由：

App.PostsIndexRoute = App.ContentRoute.extend()
App.CommentsIndexRoute = App.ContentRoute.extend()

但最好使用 mixin 来完成，这样您就可以轻松地将您希望的任何问题包含在任何路由中（例如，经过身份验证的路由问题）。

App.RenderIntoContent = Em.Mixin.create
  renderTemplate: (controller, model)->
    @render outlet: "content", into: "application"

App.PostsIndexRoute = Em.Route.extend App.RenderIntoContent,
  ...

App.CommentsIndexRoute = Em.Route.extend App.RenderIntoContent,
  ...
于 2014-05-02T02:41:38.213 回答