EmberJS-嵌套资源的渲染模板

Question

我的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正确(〜/项目/ 2 /列表).

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

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/

Answer 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