如何获取详细视图模板以在 emberjs 中呈现？

Question

我是 EmberJs 的新手，我正在尝试做一些简单的事情，比如在从列表中选择一个项目后显示详细视图。 我已经设置了this jsfiddle

在我的路由的 renderTemplate 函数中，我正在执行控制台日志记录以查看该函数是否被调用过。对于我的 PostsRou​​te，它可以工作，但我没有从 PostsDetailsRoute.renderTemplate 得到任何输出

模板

  <script type="text/x-handlebars" id="posts">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span3">
                <table class='table'>
                    <thead>
                        <tr><th>Recent Posts</th></tr>
                    </thead>
                    {{#each post in posts}}
                    <tr><td>
                            {{#linkTo details post.id}}{{post.title}}{{/linkTo}}
                        </td></tr>
                    {{/each}}
                </table>
            </div>
        </div>
    </div>
</script>

<script type="text/x-handlebars" data-template-name="posts/details">
    {{post.description}}
</script>

路线

App.PostsDetailsRoute = Ember.Route.extend({

    renderTemplate: function () {
        console.log('template PostsDetails rendered');
        this.render();
    }
});


App.PostsRoute = Ember.Route.extend({
    posts: [],
    setupController: function (controller) {
        controller.set('posts', App.Post.find());
    },
    renderTemplate: function () {
        console.log('template Posts rendered');
        this.render();
    }

});

顺便说一句，在 EmberJs 中使用 data-template-name 和 id 来处理把手模板有什么区别？

Answer 1

这里发生了一些事情。

• 在您的路由器中，您已将details 定义为资源，但您的应用程序将其用作路由。两者的区别可以在Ember.js guide 中找到。注意命名约定的不同；如果 details 被定义为子资源，Ember 会将其匹配到 DetailsController 控制器。资源其实就是你想要的，但当代理论认为它应该简单地称为post，从而匹配PostController、PostRoute等。

这是您的路由器的外观：

App.Router.map(function () {
    this.resource('about');
    this.resource('posts', function () {
        this.route('post', { path: ':post_id' });
    });
});

• 没有{{outlet}} 标记供您的详细信息呈现。您需要在此处做出 UI 决定：帖子详细信息是在帖子索引下方呈现，还是在新屏幕上呈现？如果是前者，则需要在posts 模板中添加{{outlet}} 标签。如果是后者，您需要将posts 模板替换为{{outlet}} 并将其当前内容移动到posts/index 模板中。

• 链接到路由或资源时，您应该将实际模型传递给 {{linkto}} 助手，而不是模型的 id。

• 当您通过{{linkTo}} 向post 路由提供模型时，路由器将模型存储在控制器的content 属性中。由于PostController 默认为ObjectController，它还将模型的属性代理到this。因此，在您的post 模板中，您应该通过{{content.description}} 或只是{{description}} 绑定到description。

• 您可以通过使用PostsRoute 中的模型挂钩加载帖子来节省一些字符。 Ember 会将结果安装在PostsController 的content 属性中，因此您需要稍微更新您的模板。

Here's the updated jsfiddle with the above changes.