Rendering ember nested templates

1

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

Hi ,

In Ember.Route of new cars :

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

Michael

3

Hi,

can u tell me the javascript equivalent please ?

4

I’ve tried this with no success:

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

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…

6

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:

1 Like
7

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

8

@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 feel free to check it out. Hope it’s useful.

9

thank you, its works !!

10

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