How to connect outlets for a highly nested ember.js route structure
I have the following routes
App.Router.map(function(match) {
this.route("days", { path: "/" });
this.resource("day", { path: "/:day_id" }, function() {
this.resource("slots", { path: "/slots" }, function() {
this.resource("slot", { path: "/:slot_id" }, function() {
this.route("edit", { path: "/edit" });
});
});
});
});
I have the following templates for the above
script/app/templates/application.handlebars script/app/templates/days.handlebars script/app/templates/day.handlebars script/app/templates/day/index.handlebars script/app/templates/slots.handlebars script/app/templates/slots/index.handlebars script/app/templates/slot.handlebars script/app/templates/slot/index.handlebars script/app/templates/slot/edit.handlebars
- is true
- what html should be in each handlebars template if i plan to do below (excluding days)
-
what routes do I need to define, assuming what I want to do below (excluding days)
- when the day is selected. I want to show a list of related models. (slots in this case)
- When a slot is selected I want the html to be the index page (showing a single slot based on the slot id param is passed to the route)
UPDATE
So far, it looks like routes marked with "resource" must have a {{outlet}} for an internal resource or route in order to discard some markup.
for example the template day.handlebars has {{outlet}} and inside my template day / index.handlebars. I am throwing a for loop to show every day. Next, inside the slots.handlebars template, I include {{outlet}} and inside the slots template /index.handlebars. I add another loop to display every available slot.
source to share
Here it goes
script/app/templates/application.handlebars - {{outlet}}
script/app/templates/days.handlebars - template, but it should be a `resource`
instead of a route, which results in this
script/app/templates/days/index.handlebars - will be rendered on `/days`
script/app/templates/day.handlebars - {{outlet}} inserted into `application` outlet
script/app/templates/day/index.handlebars - inserted into `day` outlet
script/app/templates/slots.handlebars - {{outlet}} inserted into `day` outlet
// this also overwrites `day/index` template, so only one of them
// can be displayed at once
script/app/templates/slots/index.handlebars - inserted into `slots` outlet
script/app/templates/slot.handlebars - {{outlet}} inserted into `slots` outlet
script/app/templates/slot/index.handlebars - inserted into `slot` outlet
script/app/templates/slot/edit.handlebars - inserted into `slot` outlet
You must also define days
as resource
this.resource("days", { path: "/" });
This has nothing to do with other routes, this route will still work
this.resource("day", { path: "/:day_id" } ...
source to share
Adding to Jakub's answer. In the case of nested resources, usually (when you want the child to appear above the parent) xyz.handlebars should only contain the output and any HTML you would like part of the xyz template should go to xyz / index.handlebars . This is because whenever you return to the parent resource it will not be re-rendered, because ember assumes it will be present all the time. But siblings will always be re-rendered, which in your case will be slot / index and slot / edit
In terms of routes, everything a child needs to have will be a resource. In your case, host / # / days and hosts / # / day are displayed in the output folder
source to share