Question

我的路由器：

    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模板。

是否可以使posts模板覆盖sites模板？

注意：有两个模板site和sites。

Answer 1

为什么当我按下去帖子行时它不会呈现帖子模板？相反，它正在渲染网站模板。

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

是否可以制作帖子模板覆盖网站模板？

是的，您可以在网站模板中将您的商店命名为{{outlet test}}

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

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

Working fiddle

<强>更新

甚至无需为您的商店命名。您只需将网站呈现并将模板发布到网站模板中

即可

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

Updated fiddle

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

1 个答案: