0

我是 EmberJs 的新手，我正在尝试做一些简单的事情，比如在从列表中选择一个项目后显示详细视图。我已经设置了这个 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 的把手栏模板的数据模板名称和 id 有什么区别？

4

1 回答 1

1

这里发生了几件事。

  • 在您的路由器中，您已将其定义details为资源，但您的应用程序将其用作路由。两者之间的区别可以在Ember.js 指南中找到。注意命名约定的不同；如果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模板替换为 an{{outlet}}并将其当前内容移动到posts/index模板中。

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

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

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

这是具有上述更改的更新 jsfiddle。

于 2013-06-06T21:00:25.947 回答