Question

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

在我的路由的renderTemplate函数中，我正在进行控制台日志记录，以查看是否曾调用该函数。对于我的PostsRoute，它可以工作，但我没有得到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的句柄栏模板的uing 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决定：在帖子索引下面或新屏幕上发布详细信息吗？如果是前者，则需要在{{outlet}}模板中添加posts标记。如果是后者，则需要将posts模板替换为{{outlet}}，并将其当前内容移至posts/index模板。
当链接到路线或资源时，您应该将实际模型传递给{{linkto}}助手，而不是模型的id。
当您通过post向{{linkTo}}路径提供模型时，路由器会将模型存储在控制器的content属性中。由于PostController默认为ObjectController，因此它还会将模型的属性代理为this。因此，在post模板中，您应该通过description或仅{{content.description}}绑定到{{description}}。
您可以使用PostsRoute中的模型挂钩加载帖子，从而为自己节省几个字符。 Ember会将结果安装在content的{{1}}属性中，因此您需要稍微更新模板。

Here's the updated jsfiddle with the above changes

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

1 个答案: