3

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

由于每个Post 都有很多 Comments并且有很多 Trackbacks，我希望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：我想将评论模板渲染到帖子/显示模板的出口，但这不起作用。当我用另一个现有模板（例如application、posts、post ）替换into值时，我确实看到了评论。

我做错了什么？

4

3 回答 3

3

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

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路由。这可以确保当您要插入commentortrackback模板时该模板仍然存在。

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

工作 JSFiddle

更新

您可以将show路由渲染到posts路由中，该路由将post用您的模板替换post/edit模板：

更新了 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'});   
    }
});
于 2013-03-01T01:37:09.967 回答
1

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

这是一个jsfiddle。

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

更新：修复链接

于 2013-03-01T01:38:09.300 回答
0

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

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

参考：Ember 文档

于 2013-03-02T11:07:48.260 回答