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

【问题标题】：Render child records into specific outlet将子记录渲染到特定的出口
【发布时间】：2013-02-28 22:08:10
【问题描述】：

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

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

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

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

cmets 和 trackbacks 路由基本一致：

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：我想将 cmets 模板渲染到 post/showoutlet /strong> 模板，但这不起作用。当我用另一个现有模板（例如 application、posts、post）替换 into 值时，我确实看到了cmets 出现。

我做错了什么？

【问题讨论】：

标签： ember.js

【解决方案1】：

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

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

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

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

这意味着当您转换到 comments 路由时，您的 post.show 路由未激活，这就是您无法渲染到其 {{outlet}} 的原因。

由于您没有将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 模板替换为您的post/edit 模板：

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

【讨论】：

这个例子是从一段更大的代码中提取的，其中我在show 路由旁边还有一个edit 路由，所以我认为我实际上需要post 资源和她show 路线。如果我不想摆脱show 路线，解决方案会是什么样子？ RyanJM 的回答有效，但我不明白为什么我需要两次 this.render？
我更新了示例以包含post.edit 路由，但它仍然不使用show 路由。
太棒了！不使用单独的show 解决了我的问题。现在我还可以从我的CommentsRoute 和TrackBacksRoute 中删除renderTemplate，因为它们会自动呈现为post。我的update JSFiddle。非常感谢。

【解决方案2】：

这有点奇怪，但你必须告诉路由再次渲染post/show。

这是jsfiddle。

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

更新：修复了链接

【讨论】：

【解决方案3】：

如果你想将模板渲染到不同的命名插座

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

参考：Ember Documentation

【讨论】：