EmberJS-嵌套资源的渲染模板答案

【问题标题】：EmberJS-Rendering templates for nested resourcesEmberJS-嵌套资源的渲染模板
【发布时间】：2014-03-18 06:31:57
【问题描述】：

我的 Ember 路由器如下所示。

App.Router.map(function() {
    this.resource('projects', function () {
        this.resource('listings', { path: '/:project_id/listings' }, function() {
            this.route('listing', { path: '/:listing_id' });
        });
    });         
});

我有 2 个模板（项目、列表）。项目模板有一个 {{#link-to}} 帮助器，可以将锚点添加到列表资源。项目模板工作正常。 {{#link-to}} 助手似乎也能正确生成 url (~ /projects/2/listings)。

现在列表已正确呈现，但它们在项目模板中呈现。我认为这是因为资源是嵌套的。所以我删除了嵌套并将项目和列表都作为自己的资源。

App.Router.map(function() {
    this.resource('projects');          
    this.resource('listings', { path: 'projects/:project_id/listings' }, function() {
            this.route('listing', { path: '/:listing_id' });
    });
});

问题是当路由转换到列表时，列表模板没有呈现。它只是空白。下面的小提琴演示了这个问题。

小提琴：http://jsfiddle.net/harshavarma/aqHnt/3/

【问题讨论】：

小提琴中出现了一些问题：1-正如您所说，您需要在项目模板上添加一个 {{outlet}}，因为列表是项目的子项，因此它的模板需要一个在父模板内渲染的地方。 2-您将项目对象传递给列表路由/控制器，列表模板需要一个列表。第三件事是列表模板引用了listing.PropertyCode而不是listing.propertyCode。小提琴：jsfiddle.net/UZq9Q 但是 - 我不确定所有这些都真正回答了你的问题 - 请修改小提琴或修改问题以提供更多信息和代码。
@MeoriOransky 感谢您的宝贵时间。我添加了一个新的更正的小提琴。它可以工作，但列表模板会在项目中呈现，而我想完全替换项目。所以我想我应该像以前那样取消嵌套资源，只使用“路径”哈希来操作 url。但是如果我这样做，列表模板不会被渲染。请看看这个新的小提琴。 jsfiddle.net/harshavarma/aqHnt/3你能指出我在这里做错了什么吗？

标签： ember.js handlebars.js

【解决方案1】：

要做你想做的事，按照你开始的方式构建你的路线

App.Router.map(function() {
    this.resource('projects', function () {
        this.resource('listings', { path: '/:project_id/listings' }, function() {
            this.route('listing', { path: '/:listing_id' });
        });
    });         
});

那么，projects 模板应该只是{{outlet}}。如果您只想在导航到 /projects 时呈现内容，而不是在您更深入地导航时呈现，则将该内容放入 projects/index 模板（或根据您的命名约定调用该模板）并设置任何必要的ProjectsIndexRoute 和 ProjectsIndexController 上的路由器和控制器。现在您的listings 模板将只嵌套在projects 中，这只是一个出口，在查看列表时您将看不到任何projects/index 内容。

http://emberjs.com/guides/routing/defining-your-routes/#toc_resources

【讨论】：

谢谢你，这就像一个魅力。现在，这是在 Ember 中进行路由的正确方法（使用索引路由）吗？我的意思是，如果我希望一个 URL 看起来像是嵌套的，但希望资源使用完全不同的模板，那么方法是什么？
这绝对是 Ember 的做法。每个资源附带的索引路由（只要您提供一个函数作为最后一个参数）解决了提供内容的问题，这些内容只有在您路由到该级别时才应该看到（例如，一个可能提供一个实际的索引资源）。如果您想嵌套资源但在每个级别有不同的模板，您可以在每个级别上使用索引路由。请注意，当您点击嵌套资源时，资源上的路由器挂钩将一直触发，但唯一会触发挂钩的索引路由是您点击的那个。