7

有人可以用外行的方式解释嵌套插座在 ember 模板中的工作方式吗？

特别是尝试从文档中理解这一点：http: //emberjs.com/guides/routing/rendering-a-template/

“直接父路由没有渲染到主出口……”

这意味着当前路由试图渲染到父路由的模板中，但是父路由没有渲染模板，或者，如果它渲染了，则父路由提供的模板没有渲染到主模板中（即，默认 {{outlet}}）。

更具体地说，我正在尝试了解如何在我的应用程序中创建嵌套视图层次结构。它是三层深度的集合。我想根据集合的内容创建一系列可折叠的嵌套视图。数据结构可以是树状的。

图书馆->每个图书馆有很多书->每本书有很多页

寻找在实践中演示嵌套模板结构的说明性 jsbin 或代码示例。

想象一个看起来像这样的路由器：

App.Router.map(function() {

    this.resource('libraries', function() {
        this.route('new');

        this.resource('library', {path: ':library_id'}, function() {

            this.resource('books', function() {
                this.route('new');
                this.resource('book', {path: ':book_id'}, function() {

                    this.resource('pages', function() {
                        this.route('new');
                        this.resource('page', {path: ':page_id'}, function() {

                        }); // Page
                    }); // Pages

                }); // Book
            }); // Books

        }); // Library
    }); // Libraries

}); // map
4

1 回答 1

9

一般来说，大多数模板语言都提供了一些将target页面内容包装到主布局中的方法。这允许将公共页面布局分离到另一个文件中，并将较小的目标模板放在不同的文件中。

在 Ember 中对此进行了几次迭代，目前此功能由{{outlet}}助手提供。奥特莱斯是 Emberyield进入布局的方式。

outlet明显不同的区域yield是筑巢。在服务器端生成要简单得多。您只需要标记要让出的模板区域，然后调用以将内容块生成到该指定目标中。

但是，当内容的呈现切换到客户端 javascript 时，只有部分页面会按需更新。你不能再简单地yield直接进入标记。你需要一个更聪明的yieldie:- outlet。

有 2 个方面{{outlet}}。

  1. 一个标记，指示您要在哪里产生。这是{{outlet}}帮手。
  2. 将模板呈现到此插座的代码。这是钩子render内部使用的方法。renderTemplate

默认情况下 an{{outlet}}不需要名称。这使它成为该模板的默认出口。一个模板中可以有很多这样的出口，它们可以通过给它一个名字来指定。例如：-

{{outlet 'sidebar'}}
{{outlet 'nav'}}

这声明了 2 个名为“sidebar”和“nav”的网点。您现在可以将其他模板渲染到这些插座中。

在没有明确的出口名称的情况下使用默认出口。对于命名的网点，渲染是通过调用rendera 的renderTemplate钩子来完成的Route。您可以通过在作为选项outlet传递给render方法的哈希中指定一个选项来执行此操作。

renderTemplate() {
    this.render('recentPosts', { outlet: 'sidebar' });
}

在这里，模板recentPosts将被渲染到其父模板内名为“sidebar”的插座中。

当路由嵌套在其他嵌套路由中时，它们将渲染到最近的父出口。如果父资源没有默认出口，则使用它的父资源，依此类推，直到到达application模板。

当您在 中声明resourcewiththis.resource('posts');时Router，您是在根据约定指示一些事情。

  1. 使用布局模板渲染posts路线posts。
  2. posts.index或者，使用模板渲染隐式路由posts/index。

该posts模板包含所有帖子通用的布局及其子资源。至少，它必须至少包含一个默认出口，如{{outlet}}.

没有这个{{outlet}}子路由将没有直接的父出口来渲染。然后，它们将在该父级的父级或最终在application模板的出口中呈现。发生这种情况时，您将看到"The immediate parent route did not render into the main outlet ..."警告。outlets发生这种情况时检查您的位置。

posts.index是给所有具有嵌套路由的资源的隐式路由。换句话说，如果您的资源具有嵌套路由，则无需显式声明嵌套的this.route('index)`。

该index路由可以显示该资源的内容。例如，对于posts.index，您可以显示所有 的列表posts。此隐式路线的第二个警告是模型位于父posts路线上。您必须使用needsapi 在PostsIndexController.

needs: ['posts'],
contentBinding: 'controller.posts'

此外，这posts.index条路线是可选的。您可以将posts/index用于显示帖子列表的 UI 直接放入posts模板本身。然而，这意味着任何子资源也将与帖子列表一起呈现，与posts. 是否使用显式索引路由的决定取决于需要显示的 UI。

位于所有其他模板之上的是application模板。它必须有一个outlet用于渲染的嵌套资源，并且通常包含页面通用的布局。如果您未指定应用程序模板，则将使用默认模板。这个生成的模板等价于{{outlet}}，即：- 一个只有一个默认出口的模板。

考虑以下路线。

App.Router.map(function() {
    this.resource('posts', function() {
      this.route('new')
      this.resource('post', {path: ':post_id'}, function() {
        this.resource('comments', function() {
          this.route('new');
        });
      });
    });
});

在这里，posts.new会被渲染到posts里面posts，里面会被渲染，里面会被渲染到application模板的默认出口。下面列出了使用的其余模板。

+---------------------------+--------------------------------------------------------+
| Route                     | Templates used (default outlets)                       |
+---------------------------+--------------------------------------------------------+
| posts.index               | posts.index > posts > application                      |
+---------------------------+--------------------------------------------------------+
| posts.new                 | posts.new > posts > application                        |
+---------------------------+--------------------------------------------------------+
| posts.post.index          | post.index > post > posts > application                |
+---------------------------+--------------------------------------------------------+
| posts.post.new            | post.new > post > posts > application                  |
+---------------------------+--------------------------------------------------------+
| posts.post.comments.index | comments.index > comments > post > posts > application |
+---------------------------+--------------------------------------------------------+
| posts.post.comments.new   | comments.new > comments > post > posts > application   |
+---------------------------+--------------------------------------------------------+

可以通过为方法指定一个into选项来更改此默认模板层次结构render。

renderTemplate: function() {
  this.render('posts', { into: 'sidebar' })
}

这里posts模板将渲染到模板的默认出口sidebar。

就是这样。Outlet是另一个使用大量约定而不是配置的 ember 概念。默认设置非常好，同时易于自定义。

于 2013-07-16T10:22:39.957 回答