将儿童记录放入特定插座 [英] Render child records into specific outlet

问题描述

我在 jsfiddle 上有这个工作示例，其中显示了一个帖子列表即可。当选择发布时，我会在帖子模板的插座中显示详细信息。

I have this working example on jsfiddle where I'm showing a list of Posts. When a Post is selected, I display the details in the outlet of the posts template. No problem so far.

由于每个发布 有很多 评论和 >有很多 回溯，我想让 post / show 模板显示两个标签，所以我可以显示下面的评论或引用详细信息。

Since every Post has many Comments and has many Trackbacks, I'd like to have the post/show template to show two tabs, so I can show either the comments or the trackbacks beneath the details.

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

For this the post/show template looks like this:

<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>

评论和追踪路线基本相同：

The comments and trackbacks routes are basically identical:

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 ：我想渲染评论模板进入 post / show 模板的渠道，但这不工作。当我将另一个现有模板（例如应用，帖子，帖子）更改为值时，我看到

My question is about renderTemplate: I would like to render the comments template into to outlet of the post/show template, but this is not working. When I replace the into value with another existing template (e.g. application, posts, post) I do see the comments appear.

我做错了什么？

推荐答案

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

One great way to help debugging router issues is to turn on the router logging:

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

这可以让您看到要转换的路由。在你的情况下，当导航到评论部分时，它显示：

This lets you see which route you are transitioning into. In your case, when navigating to the comments section it shows:

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

意味着当您转换到评论路线时，您的 post.show 路线不活动，这就是为什么您可以'不要使用 {{outlet}} 。

This means that your post.show route is not active when you transition to the comments route, which is why you can't render into its {{outlet}}.

由于您没有使用发布任何实际内容的模板，您可以将 post / show 模板重命名为 post ，摆脱 show 路由。这样可以确保当您要插入注释或 trackback 模板时，该模板仍然在。

Since you are not using the post template for any actual content you can rename your post/show template to post and get rid of the show route. This makes sure that template is still around when you want to insert the comment or trackback template.

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 将包含从发布的帖子，所以你可以删除 controllers.post 并直接访问帖子的属性：

Since you changed the template from post/show to post the postController will contain the post passed from posts, so you can drop the controllers.post and access the properties of the post directly:

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

现在你要做的就是更新目标路线进行渲染，现在只是 post ：

Now all you have to do is update the targeted route to render into, which is now just post:

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

工作JSFiddle

更新

您可以将 show 路线呈现到帖子路线中，该路线将替换 post 模板与您的发布/编辑模板：

You can have the show route render into posts route which will replace the post template with your post/edit template:

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

这篇关于将儿童记录放入特定插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！