Ember-CLI路由:更改了我的路由/模板结构,但构建无法识别更改？

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

我以为我已经做了一对一的所有更改,但出于某种原因,当我重新启动ember服务器时,嵌套的"展示位置"路线被破坏了.

在控制台日志中,我注意到ember仍在尝试查找placements.index旧templates/placements/index目录而不是新目录.

有一种理论认为模板不能以与路由器相同的方式嵌套？这意味着我可能需要使用renderTemplate钩子显式定义每个路径,以便它显示正确的模板......这可能是一个痛苦,因为这个项目将会非常大......也许还有其他东西我我做错了吗？

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

相同的模式适用于嵌套相应的/路由,/控制器,/适配器等等.

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