Ember- How to render multiple templates on one page?

StackOverflow https://stackoverflow.com/questions/23205791

Question

Following http://emberjs.com/guides/routing/rendering-a-template/ I have

<body>   
  <script type="text/x-handlebars">
    <h2> Welcome to Ember.js</h2> 
    <div class="lists">{{outlet lists}}</div>
    <div class="list">{{outlet list}}</div>  
  </script>

  <script type="text/x-handlebars" data-template-name="lists">
    <h3> some List Names</h3>    
  </script>

  <script type="text/x-handlebars" data-template-name="list">
    <h3> a list selected from lists</h3>    
  </script>    
</body>

js

App = Ember.Application.create();

App.Router.map(function() {
  this.resource('lists', {path: "/"});
});

App.ListsRoute = Ember.Route.extend({
  renderTemplate: function(){
    this.render({outlet: 'lists'});
  }
});
App.ListRoute = Ember.Route.extend({
  renderTemplate: function(){
    this.render({outlet: 'list'});
  }
});

I'd expect to see

Welcome to Ember.js

some List Names


a List of selected list name


but that breaks this jsbin: http://jsbin.com/cuyuy/6/edit. I'm still left wondering How to render multiple templates on one page?

Was it helpful?

Solution

It's hard to give a good answer with this context, but your example will work if you add 

this.render('list', {
      outlet: 'list'
    });

to your renderTemplate hook from ListsRoute. See http://jsbin.com/cuyuy/8/edit

edit: Since the code above is not really the ember way, check out this jsbin with nested routes: http://jsbin.com/hutem/1/edit

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top