K..
K..

Reputation: 4233

Rendering templates with different models into named outlets in Ember.js

I want to render 2 lists of items, both templates that each over the model.

I tried to render the main template first and then the nested ones into some named outlets of the main template, which works.

But when I try to give the nested ones a different model (they all use different model arrays), I get an error:

 The value that #each loops over must be an Array.
 You passed '<DS.PromiseArray:ember451>' (wrapped in (generated homepage controller))

Here is the code:

renderTemplate:function(){
  this.render('homepage');

  this.render('roomlist',{
    'into':'homepage',
    'outlet':'roomlist',
    'model':this.store.find('room')
  });

  this.render('activitylist',{
    'into':'homepage',
    'outlet':'activitylist',
    'model':this.store.find('activity')
  });
}

Edit:

Alternative idea I had, was to use {{render "roomlist" rooms}} after this.set("rooms", this.store.find("room"); in the model-hook instead of the renderTemplate-hook. But it threw almost the same error:

The value that #each loops over must be an Array.
You passed (generated roomlist controller) 

Upvotes: 0

Views: 363

Answers (1)

Asgaroth
Asgaroth

Reputation: 4334

You should resolve the models you will use in the model hook, and then you can use them in your templates much easier:

something like this:

model: function() {
  return Ember.RSVP.hash({
    rooms: this.store.find('room'),
    activities: this.store.find('activity')
  });
},
setupController: function(controller, model) {
  this.set('rooms', model.rooms);
  this.set('activities', model.activities);

  controller.set('model', model.rooms);
},

renderTemplate: function(){
  this.render('homepage');

  this.render('roomlist',{
    'into':'homepage',
    'outlet':'roomlist',
    'model':this.get('rooms')
  });

  this.render('activitylist',{
    'into':'homepage',
    'outlet':'activitylist',
    'model':this.get('activities')
  });
}

Upvotes: 1

Related Questions