如何为重度嵌套的 ember.js 路由结构连接插座

Question

我有以下路线

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" });
            });
        });
    });
});

以上我有以下模板

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

1. 以上是正确的
2. 如果我打算执行以下操作（不包括几天），每个车把模板中应该包含什么 html

3. 假设我想做以下事情（不包括几天），我需要定义哪些路线

   • when a day is selected I want to show a list of associated models （在这种情况下为插槽）
   • 当一个插槽被选中时，我想要从 它是索引页面（根据插槽 ID 显示单个插槽 参数被传递给路由）

更新

到目前为止，标有“资源”的路由似乎需要有一个 {{outlet}} 可用于内部资源或路由以放入一些标记。

例如 day.handlebars 模板有一个 {{outlet}}，在我的 day/index.handlebars 模板中，我放入一个 for 循环来显示每一天。接下来在 slot.handlebars 模板中我包含一个 {{outlet}} 并在 slot/index.handlebars 模板中添加另一个 for 循环来显示每个可用的插槽。

Answer 1

添加到 Jakub 的答案 - 在嵌套资源的情况下，通常（当您希望子项在父项上呈现时）xyz.handlebars 应该只包含出口和您想要的任何 html xyz 模板的一部分应该进入 xyz/index.handlebars。这是因为每当您返回父资源时，它不会被重新渲染，因为 ember 假定它一直存在。但是兄弟姐妹总是会被重新渲染，在你的情况下是 slot/index 和 slot/edit

关于路线，任何必须有孩子的东西都是资源。在你的情况下 host/#/days 和 hosts/#/day 都被渲染到应用程序出口

Answer 2

来了

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

您还应该将days 定义为资源

this.resource("days", { path: "/" });

和其他路由没什么区别，这条路由还是可以的

this.resource("day", { path: "/:day_id" } ...