ember.js - Ember-CLI 路由 : Changed my route/template structure, 但构建无法识别更改？

Question

我刚刚在 ember-cli 中更改了我的路线结构并破坏了我的应用程序。我想将我当前的结构嵌套更深一层......

之前:

Router.map(function() {
    this.resource('placements', function() {
        this.route('add');
        this.route('import');
        this.route('open');
    });
    this.route('admin');
});

之后:

Router.map(function() {
    this.resource('portal', function() {
        this.resource('placements', function() {
            this.route('add');
            this.route('import');
            this.route('open');
        });
        this.route('admin');
    });
});

我的模板结构也需要改变...

之前:

- templates/
-     placements/
-         add.hbs
-         import.hbs
-         index.hbs
-         open.hbs
-     admin.hbs
-     application.hbs
-     index.hbs
-     placements.hbs

之后:

- templates/
-     portal/
-         placements/
-             add.hbs
-             import.hbs
-             index.hbs
-             open.hbs
-         admin.hbs
-         index.hbs
-         placements.hbs
-     application.hbs
-     index.hbs
-     portal.hbs

我以为我已经进行了 1 对 1 的所有更改，但是由于某种原因，当我重新启动 ember 服务器时，嵌套的“放置”路由被破坏了。

在 控制台日志 ，我注意到 ember 仍在尝试寻找 placements.index下旧templates/placements/index而不是新目录。

有一种理论认为模板不能以与路由器相同的方式嵌套？这意味着我可能需要使用 显式定义每个路由。 renderTemplate hook 为了让它显示正确的模板......这可能会很痛苦，因为这个项目将会非常大......也许我做错了什么？

Answer 1

在处理@Adam 离开我的评论后。我能够找出使用模板的正确方法。

模板确实不会嵌套在与资源/路由完全相同的模式中。

鉴于我制作的新路线结构:

Router.map(function() {
    this.resource('portal', function() {
        this.resource('placements', function() {
            this.route('add');
            this.route('import');
            this.route('open');
        });
        this.route('admin');
    });
});

模板的结构应如下所示:

- templates/
-     placements/
-         add.hbs
-         import.hbs
-         index.hbs
-         open.hbs
-     portal/
-         admin.hbs
-         index.hbs
-     application.hbs
-     index.hbs
-     placements.hbs
-     portal.hbs

当您定义一个“资源”时，无论它在路由器映射中出现的嵌套有多深，本质上都会导致该特定路由成为顶级对象。 placements.hbs和 portal.hbs (从上面)是“资源”(顶层)模板，并相应地放置在模板目录的顶层。

由于这两个“资源”模板各有一个 {{outlet}} “子”路由模板需要放置在以其相应资源命名的顶级目录中。

Ember-CLI 文档描述了这个模式，只展示了一个深度的例子，所以我首先假设该模式重复深入。我希望这有助于澄清其他正在学习 Ember 的人的实际方法。

更新:

从 EMBER 1.7.0 开始

路线现在是可嵌套的!

这对我个人来说是令人兴奋的消息，但值得更新这个答案。

资源仍然可以用作上面的示例，因此如果您对此感到满意，则可以继续使用一段时间。但请记住，资源计划用于最终弃用。最终，只会有路由和嵌套路由。

好消息是，如果您遵循新模式，您可以更自然地嵌套模板以匹配您的路由器结构，就像自然的 REST 风格应用程序应该的那样。没有更多尴尬的心理映射。

例如，上面的同一个路由器(略有变化):

Router.map(function() {
    this.route('portal', function() {
        this.route('placements', function() {
            this.route('add');
            this.route('import');
            this.route('open');
        });
        this.route('admin');
    });
});

模板的结构可以像这样:

- templates/
-     portal/
-         placements/
-             add.hbs
-             import.hbs
-             index.hbs
-             open.hbs
-         admin.hbs
-         index.hbs
-         placements.hbs
-     application.hbs
-     index.hbs
-     portal.hbs

同样的模式适用于嵌套相应的/routes、/controllers、/adapters 等等。

这也意味着(使用这种新模式){{link-to}} helper 和transitionTo方法将需要包括路线的完整路径:例如{{link-to 'portal.placements.index'}} .