ember.js - 将子记录渲染到特定的导出

Question

我在 jsfiddle 上有这个工作示例我在其中显示了一个帖子列表。选择帖子时，我会在帖子模板的导出中显示详细信息。到目前为止没问题。

由于每个帖子有很多评论并且有很多引用，我我希望 post/show 模板显示两个选项卡，这样我就可以在详细信息下方显示评论或引用。

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

<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'
        });
    }
});

我的问题是关于 renderTemplate:我想将 comments 模板渲染到 post/show< 的 outlet/strong> 模板，但这不起作用。当我用另一个现有模板(例如 application、posts、post)替换 into 值时，我确实看到了评论出现。

我做错了什么？

Answer 1

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

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

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

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

这意味着当您转换到 comments 路由时，您的 post.show 路由未激活，这就是为什么您无法渲染到它的 { {导出}}。

由于您没有为任何实际内容使用 post 模板，您可以将 post/show 模板重命名为 post 并删除show 路线。这可确保当您要插入 comment 或 trackback 模板时该模板仍然可用。

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

由于您将模板从 post/show 更改为 post，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'
    });
}

Working JSFiddle

更新

您可以将 show 路由呈现到 posts 路由中，这将用您的 post/edit post 模板模板:

Updated JSFiddle

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'});   
    }
});