Question

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

由于每个帖子 都有很多 评论而有很多 引用，我我希望发布/显示模板显示两个标签，因此我可以在详细信息下方显示评论或引用。

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

<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 ：我想将评论模板呈现到发布/展示<的出口 / strong>模板，但这不起作用。当我将替换为值替换为另一个现有模板（例如应用程序，帖子，发布）时，我确实看到了评论出现。

我做错了什么？

Answer 1

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

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

Answer 2

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

这是jsfiddle。

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

更新：修复了链接

Answer 3

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

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

参考：Ember Documentation

将子记录呈现到特定的出口

3 个答案: