CODEWITHSUNDEEP
ember.jsember-data
Canttouchit
Canttouchit

Reputation: 3159

Ember.js - Rendering Template with nested resources and template overriding

My code: http://jsbin.com/axaqix/20/edit

My router:

    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'});

    });

});

My templates:

<!--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>

I have two questions: 1. Why when I press go to posts line it is not rendering posts template? Instead it is rendering site template.

  1. Is it possible to make posts template override sites template?

Note: There are two templates site and sites.

Upvotes: 1

Views: 2246

Answers (1)

selvagsz
selvagsz

Reputation: 3872

  1. Why when I press go to posts line it is not rendering posts template? Instead it is rendering site template.

You are rendering the posts route as a childRoute of site route. So when you transition to posts,the transition will be like "sites.site.posts" . Hence parent template gets rendered first followed by the child.

  1. Is it possible to make posts template override sites template?

Yeah you can name your outlet in the sites template as {{outlet test}}

and render the site and posts template into it as 

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

Working fiddle

Updated

There is even no need to name your outlets. You can simply render the site and posts template into the sites template as

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

Updated fiddle

Upvotes: 5

Related Questions