CODEWITHSUNDEEP
javascriptember.jshandlebars.js
Micha
Micha

Reputation: 53

Ember.js load model for multiple outlets

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!

Upvotes: 2

Views: 304

Answers (1)

RyanHirsch
RyanHirsch

Reputation: 1847

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();

Upvotes: 1

Related Questions