Ember.js load model for multiple outlets

Question

I want to create a dashboard like UI. For this reason I want to render multiple templates with their individual model on one page.

I thought, I can solve this with the {{render}} helper (see http://emberjs.com/guides/templates/rendering-with-helpers/#toc_the-code-render-code-helper)

I've got the templates rendered but without data in it. You can see a minimal example of the problem on JsBin: http://jsbin.com/vasezutoxege/2/edit?html,css,js,output

Some snippets of the JsBin that direct related to the problem here:

App.Router.map(function() {
    this.resource('contacts', function() {
        this.resource('contact', { path: ':contact_id'});
    });
    this.resource('records', function() {
        this.resource('record', { path: ':record_id'});
    });
});

For every Router I have a model and a template. Then I want to show the routes in the index route of my application:

<script type="text/x-handlebars" data-template-name="index">
  <!-- link to contacts route is showing contacts template with model right -->
  {{#link-to "contacts"}}Link to contacts route{{/link-to}}
  <!-- this loads the template but without data -->
  <div class="template">
    {{render "contacts" contacts}}
  </div>

  ...

</script>

What can I do to render the complete templates together with their model-data in the outlet?

Thank you for your time!

Could you add the relevant protions of code to your question? — Trudbert
Hi, I've added some code pieces into the post. But please try the JsBin example, too. There you can see empty green boxes on the index route. That means, the <ul> is rendered but no <li>'s are inserted from the model. — Micha

RyanHirsch RyanHirsch · Accepted Answer · 2014-08-15T11:04:22

Have you seen http://discuss.emberjs.com/t/dashboard-type-views/5187 ?

In that post there are multiple suggested ways to solve it. The code below seems like it would work

App.IndexRoute = Ember.Route.extend({
   model: function() {
     return Ember.RSVP.hash({
        contacts: this.store.find('contacts'),
        records: this.store.find('records'),
     });
   },

  setupController: function (controller, context) {
    this.controllerFor('contacts').set('model', context.contacts);
    this.controllerFor('records').set('model', context.records);
  }
});

However you are not using Ember-Data so I rearranged it to use a static array. Here is my solution with only the javascript changed. http://jsbin.com/vasezutoxege/4/edit (it needs minor updates to meet all you needs, notably more changes in renderTemplate)

App.IndexRoute = Ember.Route.extend({    
      setupController: function (controller, context) {
        this.controllerFor('contacts').set('model', CONTACTS);
        this.controllerFor('records').set('model', RECORDS);
      },
    renderTemplate: function() {
        // Render default outlet   
        this.render();
        // render extra outlets
        this.render("records", {
            outlet: "rec",
            into: "index" // important when using at root level
        });
    }  
});
App.IndexController = Ember.ObjectController.extend({
    needs: ['contacts', 'records'] 
});
App.ContactsController = Ember.ArrayController.extend();
App.RecordsController = Ember.ArrayController.extend();

Ember.js load model for multiple outlets

1 Answers