将子记录渲染到特定的出口

我有这个工作示例jsfiddle http://jsfiddle.net/bazzel/SM5VM/我显示的列表Posts。当一个Post选择后，我会在帖子模板的出口中显示详细信息。到目前为止没有问题。

由于每Post has many Comments and has many 引用通告，我想要发布/展示模板显示两个选项卡，这样我就可以在详细信息下方显示评论或引用。

为此，帖子/展示模板如下所示：

<script type="text/x-handlebars" data-template-name="post/show">
    <h3>{{controllers.post.title}}</h3>
    <p>{{controllers.post.description}}</p>
    <hr/>
    <ul>
        {{#linkTo comments tagName="li"}}<a {{bindAttr href="view.href"}}>Comments</a>{{/linkTo}}
        {{#linkTo trackbacks tagName="li"}}<a {{bindAttr href="view.href"}}>Trackbacks</a>{{/linkTo}}
    </ul>
    {{outlet}}
</script>

评论和引用路径基本相同：

App.CommentsRoute = Em.Route.extend({
    setupController: function (controller, model) {
        comments = this.controllerFor('post').get('comments');
        controller.set('content', comments);
    },
    renderTemplate: function () {
        this.render({
            into: 'post/show'
        });
    }
});

我的问题是关于渲染模板: 我想渲染comments模板到outlet of the 发布/展示模板，但这不起作用。当我更换into与另一个现有模板的值（例如应用, posts, post）我确实看到了comments appear.

我做错了什么？

帮助调试路由器问题的一种好方法是打开路由器日志记录：

window.App = Em.Application.create({
    LOG_TRANSITIONS: true
});

这可以让您看到您正在转换到哪条路线。在您的情况下，当导航到评论部分时，它会显示：

Transitioned into 'posts.index'
Transitioned into 'posts.post.show'
Transitioned into 'posts.post.comments'

这意味着您的post.show当您转换到comments路线，这就是为什么你不能渲染到它的{{outlet}}.

由于您没有使用post任何实际内容的模板，您可以重命名post/show模板到post并摆脱show路线。这可以确保当您想要插入时模板仍然存在comment or trackback模板。

App.Router.map(function () {
    this.resource('posts', function () {
        this.resource('post', {
            'path': '/:post_id'
        }, function () {
            this.resource('comments');
            this.resource('trackbacks');
        });
    });
});

由于您将模板更改为post/show to post the postController将包含从以下位置传递的帖子posts，这样你就可以删除controllers.post并直接访问帖子的属性：

<script type="text/x-handlebars" data-template-name="post">
...
<h3>{{title}}</h3>
<p>{{description}}</p>
....
</script>

现在您所要做的就是更新要渲染的目标路线，现在只是post:

renderTemplate: function () {
    this.render({
        into: 'post'
    });
}

工作 JSFiddle http://jsfiddle.net/SM5VM/21/

Update

您可以拥有show将渲染路由到posts路线将取代post模板与你的post/edit模板：

更新了 JSFiddle http://jsfiddle.net/SM5VM/25/

App.Router.map(function () {
    this.resource('posts', function () {
        this.resource('post', {
            'path': '/:post_id'
        }, function () {
            this.route('edit');
            this.resource('comments');
            this.resource('trackbacks');
        });
    });
});

App.PostEditRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render({into: 'posts'});   
    }
});