Ember.js - 使用嵌套资源和模板覆盖的渲染模板

Question

我的代码:http: //jsbin.com/axaqix/20/edit

我的路由器:

    WebApp.Router.map(function () {
    this.resource('sites', { path: '/' } , function() {
        this.resource('site', { path: '/sites/:site_id'} ,  function() {
            this.resource('posts', { path: 'posts' });

        });

        this.route('new', {path: 'new'});

    });

});

我的模板:

<!--Main Page-->
<script type="text/x-handlebars" data-template-name="sites">
<ul>
    {{#each site in controller}}
    <li>
        {{#linkTo 'site' site}} {{site.siteName}} {{/linkTo}}<br>
        {{#linkTo 'posts' site}} go to posts {{/linkTo}}
    </li>
    {{/each}}

</ul>
{{#linkTo 'sites.new'}} ADD NEW WEBSITE {{/linkTo}}

{{outlet}}

<!--Displays site details-->
<script type="text/x-handlebars" data-template-name="site">
   <p>Site Details</p>
    Name: {{siteName}} <br>
    Secret Key:{{secretKey}} <br>
    Public Key:{{publicKey}} <br>

</script>


<!--Inseting new WEBSITE template-->
<script type="text/x-handlebars" data-template-name="sites/new">
    <p>Add New WEBSITE</p>
    <div>
        {{view Ember.TextField placeholder="Insert new site name"
        valueBinding="newName" action="addSite"}}
    </div>
</script>


<script type="text/x-handlebars" data-template-name="posts">
   <p>Damn</p>

 </script>

我有两个问题:1.为什么当我按go to posts行时它不是渲染posts模板？相反,它是渲染 site模板.

1. 是否可以制作posts模板覆盖sites模板？

注意:有两个模板site和sites.

Answer 1

1. 为什么当我按下去帖子行时它不会呈现帖子模板？相反,它是渲染网站模板.

您正在将帖子路由呈现为站点路由的childRoute.因此,当您转换到帖子时,转换将类似于"sites.site.posts".因此,首先呈现父模板,然后是子项.

1. 是否可以使帖子模板覆盖网站模板？

是的,您可以在网站模板中将您的插座命名为 {{outlet test}}

并将网站和帖子模板呈现为

WebApp.PostsRoute = Ember.Route.extend({
    renderTemplate: function() {
    this.render('posts',{
      into: 'sites',
      outlet: 'test'
    });
    }
});

工作小提琴

更新

甚至没有必要为您的商店命名.您可以简单地将网站和帖子模板呈现为网站模板

WebApp.PostsRoute = Ember.Route.extend({
 renderTemplate: function() {
  this.render('posts',{into: 'sites'});
 }
});

更新了小提琴