How do I render multiple templates into a template and set the models for those templates?

Question

I have a template that renders two other templates dashboard/panelOne and dashboard/panelTwo. It renders each template but the data is never bound to the controller. I am assuming that renderTemplate is skipping the route to do this. You will notice that if you click on one of the links "Go to Panel One" or "Go to Panel Two" and hit the back button the data is now populated on the dashboard.

I am using EmberJS from Master:

Version: v1.0.0-pre.2-396-gddb0951

Last commit: ddb0951 (2013-01-14 10:16:46 -0800)

How can I get the data into the panel's controllers and populate the data so it shows on the dashboard without having to go into each panel first?

Here is a JSFiddle of my work.

yo dawg I heard you like templates... – Shmiddty Jan 15 '13 at 20:29 — Shmiddty, Jan 15 '13 at 20:29

score 3 · Answer 1 · answered Jan 15 '13 at 22:38

3

The problem is that you're relying on the panel routes to generate a controller for you. However, this controller is created lazily and the content is only set from within the panel routes via the model function. Instead, you should just declare the controllers and set the content on them in advance. See http://jsfiddle.net/yrsGu/49/

answered Jan 15 '13 at 22:38

Peter Wagenet

4,976
22
26

Aww, that works. I tried other ways similar to that, but I didn't know I could set the content that way. Thanks! – Sean Keating Jan 15 '13 at 22:42
But now.. If you try to switch between the panels now the data in the panels are gone, and you go back to the dashboards after going to a panel the data is gone in your example. – Sean Keating Jan 15 '13 at 22:46
I should have recommend that you do additional setup in `setupController` on your route. – Peter Wagenet Jan 29 '13 at 21:03

score 0 · Accepted Answer · answered Jan 16 '13 at 00:15

So far, I haven't found a solution that works like I think it should. In order to avoid making controllers and Routes for my panels I needed to keep the Route definitions and then where I define renderTemplates in the DashboardIndexRoute I define it this way:

this.render('dashboard/panelOne', {
    into: 'dashboard.index',
    outlet: 'panelOne',
    controller: this.controllerFor('dashboard/panelOne', App.Sites.find())
});

This creates the controller and injects the model for me. Also this allows be to define the model that the template will take. So, if I want to same make more templates (because I like templates) and reuse the panel template BUT use a different model this makes it possible.

In the case of Peter's answer. It assumes that the model will be the same every time when the panel is called. Which may work in some instances and that will work better if the model is the same and the panel is reused in multiple locations.

Here is the latest JSFiddle.

I'll keep the question open for now, to see if someone else has another solution.

How do I render multiple templates into a template and set the models for those templates?

2 Answers2