# Rendering ember nested templates

**URL:** <https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951>\
**Category:** Uncategorized\
**Created:** [December 18, 2014, 3:30pm UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951 "2014-12-18T15:30:45Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakenoor](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakenoor/32/10002_2.png) [@bakenoor](https://discuss.emberjs.com/u/bakenoor)\
**Post date:** [December 18, 2014, 3:30pm UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/1 "2014-12-18T15:30:45Z")

</div>

Suppose I have the following:

```
window.App = Ember.Application.create();
App.Router.map(function() {
  this.resource("cars",function (){
    this.route("new");
  });
 });

```

if I understand well, first, cars template will be rendered then cars/new template will be rendered into outlet of car’s template. But I don’t want this, i want to render cars/new template in a different template. I think it’s not always that we want to render a render a child template in it’s parent template. Because for e.g. /cars may show all cars and /cars/new may allow you to add a new car and you want to view all cars while adding a new car.

In fact, my question, suppose i want to render the car/new template in the following example in the main outlet in the application template, how can i achieve this:

```
<html>
    <head>.....</head>
    <body>
        <script type="text/x-handlebars" data-template-name="cars">
            cars<br/>
        </script>

        <script type="text/x-handlebars" data-template-name="cars/new">
            cars new
        </script>

        <script type="text/x-handlebars">
              <header id="header">
                {{outlet header}}
              </header>

              <section id="main">
                {{outlet main}}
              </section>

              <footer id="footer">
                Some footer
              </footer>
        </script>

        <!--lib files-->
        <!--script will go here-->
    </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![alveslobo\_michael](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alveslobo_michael/32/9522_2.png) [@alveslobo\_michael](https://discuss.emberjs.com/u/alveslobo_michael)\
**Post date:** [December 18, 2014, 4:31pm UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/2 "2014-12-18T16:31:04Z")

</div>

Hi ,

In Ember.Route of new cars :

```auto
renderTemplate: () ->
    @render 'cars.new'
```

Michael

---

<div class="post-metadata">

**Author:** ![bakenoor](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakenoor/32/10002_2.png) [@bakenoor](https://discuss.emberjs.com/u/bakenoor)\
**Post date:** [December 18, 2014, 4:53pm UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/3 "2014-12-18T16:53:44Z")

</div>

Hi,

can u tell me the javascript equivalent please ?

---

<div class="post-metadata">

**Author:** ![bakenoor](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakenoor/32/10002_2.png) [@bakenoor](https://discuss.emberjs.com/u/bakenoor)\
**Post date:** [December 18, 2014, 5:05pm UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/4 "2014-12-18T17:05:38Z")

</div>

I’ve tried this with no success:

```
App.CarsNewRoute = Ember.Route.extend({
  renderTemplate: function() {
    this.render('cars.new');
  }
});

```

---

<div class="post-metadata">

**Author:** ![alveslobo\_michael](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alveslobo_michael/32/9522_2.png) [@alveslobo\_michael](https://discuss.emberjs.com/u/alveslobo_michael)\
**Post date:** [December 18, 2014, 5:38pm UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/5 "2014-12-18T17:38:38Z")

</div>

Sorry ,

I use coffee and rails-ember … In my case , i must create the cars directory and the file new.hbs and it work fine…

---

<div class="post-metadata">

**Author:** ![alexspeller](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alexspeller/32/14812_2.png) [@alexspeller](https://discuss.emberjs.com/u/alexspeller)\
**Post date:** [December 19, 2014, 5:36am UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/6 "2014-12-19T05:36:12Z")

</div>

This is not the correct way to do this @alveslobo_michael - most of the time I see people using renderTemplate it is in error, and this is no exception.

In your case, the renderTemplate has no effect at all, because you are rendering the template that would have been rendered anyway.

@bakenoor route nesting == template nesting. If you don’t want to nest your templates, then you must not nest your routes. If you want the new route to not be in an outlet, then you must change your router so that the routes are on the same level. Here is an article that goes into more detail:

> **[Ember Routing: The When and Why of Nesting](https://hashrocket.com/blog/posts/ember-routing-the-when-and-why-of-nesting)**
>
> Understanding the proper use of the Router in an Ember.js app is a fundamental core concept of the framework. The docs tell us that the router translates a URL into a series of nested templates and almost all available tutorials show how to nest...

---

<div class="post-metadata">

**Author:** ![alveslobo\_michael](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/alveslobo_michael/32/9522_2.png) [@alveslobo\_michael](https://discuss.emberjs.com/u/alveslobo_michael)\
**Post date:** [December 19, 2014, 8:39am UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/7 "2014-12-19T08:39:49Z")

</div>

@alexspeller: ok , i’ve learned the lesson, effectivily i’m a rails developper and i trend to copy the rails way …

---

<div class="post-metadata">

**Author:** ![Sang\_Cu](https://avatars.discourse-cdn.com/v4/letter/s/bb73d2/32.png) [@Sang\_Cu](https://discuss.emberjs.com/u/Sang_Cu)\
**Post date:** [December 20, 2014, 1:35am UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/8 "2014-12-20T01:35:07Z")

</div>

@bakenoor: as @alxespeller said. if you’re nesting route then templates should nesting as well. In your case, I guess, you should define an outlet in your “cars” template and show a list of cars in “cars/index”. I’ve created example in jsbin: [JS Bin - Collaborative JavaScript Debugging](http://jsbin.com/ziququwebi/1/edit?html,js,output) feel free to check it out. Hope it’s useful.

---

<div class="post-metadata">

**Author:** ![bakenoor](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/bakenoor/32/10002_2.png) [@bakenoor](https://discuss.emberjs.com/u/bakenoor)\
**Post date:** [December 20, 2014, 4:44am UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/9 "2014-12-20T04:44:31Z")

</div>

thank you, its works !!

---

<div class="post-metadata">

**Author:** ![dogawaf](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dogawaf/32/4230_2.png) [@dogawaf](https://discuss.emberjs.com/u/dogawaf)\
**Post date:** [December 25, 2014, 11:11am UTC](https://discuss.emberjs.com/t/rendering-ember-nested-templates/6951/10 "2014-12-25T11:11:36Z")

</div>

Good to know: if the `cars.hbs` template contains only an {{outlet}}, you can omit it.