ember.js - Ember JS 和 Ember Rails 中的嵌套路由

Question

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

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

"The immediate parent route did not render into the main outlet ..."

This means that the current route tried to render into the parent route's template, but the parent route didn't render a template, or, if it did, that the template which the parent route provided did not render into the main template (i.e., a default {{outlet}}).

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

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

寻找在实践中演示嵌套模板结构的说明性 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

Answer 1

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

在 Ember 中已经有一些这样的迭代，目前这个功能是由 {{outlet}} 提供的。 helper 。奥特莱斯是 Ember 的途径 yield成一个布局。

所在区域outlet明显偏离 yield正在嵌套。在服务器端生成要简单得多。您只需要标记模板的区域以进​​入，然后调用将内容块生成到指定的目标中。

但是，当内容的呈现切换到客户端 javascript 时，仅页面的一部分会按需更新。您不能再简单地yield直接进入标记。您需要更智能的 yield即:- outlet .
{{outlet}} 有两个方面.

一个标记，指示您要屈服的位置。这是{{outlet}} helper 。

将模板呈现到此 socket 中的代码。这是render renderTemplate里面使用的方法钩。

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

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

这声明了 2 个名为 'sidebar' 和 'nav' 的导出。您现在可以将其他模板渲染到这些 socket 中。

在没有显式 socket 名称的情况下渲染时使用默认 socket 。对于命名的导出，渲染是通过调用 render 完成的。在 renderTemplate钩子(Hook)Route .
您可以通过指定 outlet 来完成此操作。传递给 render 的散列中的选项方法作为选项。

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

在这里，模板recentPosts将被渲染到其父模板中名为“侧边栏”的导出中。

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

当您声明 resource 时与 this.resource('posts');在 Router ，您是根据惯例指出一些事情。

渲染 posts带有布局模板的路线 posts .

可选地，呈现隐式 posts.index带模板的路由posts/index .

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

没有这个 {{outlet}}子路由不会有直接的父导出来渲染。然后他们将在该父级的父级或最终呈现 application模板的导出。发生这种情况时，您将看到 "The immediate parent route did not render into the main outlet ..."警告。检查您的 outlets 的位置当这个情况发生时。
posts.index是给所有具有嵌套路由的资源的隐式路由。换句话说，如果你的资源有嵌套路由，你不需要显式声明一个嵌套的，this.route('index )`。

此 index route 可以显示该资源的内容。例如，对于 posts.index , 可以显示所有posts的列表.此隐式路由的一个次要警告是模型位于父级 posts 上。路线。您必须使用 needs api 在 PostsIndexController 中获得此模型.

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

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

位于所有其他模板之上的是 application模板。它必须有一个 outlet用于呈现嵌套资源，并且通常会包含页面通用的布局。如果您未指定应用程序模板，则将使用默认模板。这个生成的模板相当于{{outlet}} , 即:- 一个只有默认 socket 的模板。

考虑以下路线。

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模板的默认 socket 。下面列出了其余使用的模板。

+---------------------------+--------------------------------------------------------+
| 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 的默认 socket 中模板。

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