Ember 具有多个 BelongsTo 关系的非平凡路由器

Question

我正在构建一个包含三个主要模型的项目管理应用程序：

Client、Project、Task

我的模型（仅限关系）

let client = DS.Model.extend({
  projects: DS.hasMany('project');
});

let project = DS.Model.extend({
  client: DS.belongsTo('client'),
  tasks: DS.hasMany('task')
});

let task = DS.Model.extend({
  project: DS.belongsTo('project')
});

要求：

显示所有客户列表
显示所有客户项目的列表（未嵌套在 UI 中）
显示项目任务列表（未嵌套在 UI 中）
显示任务的详细信息（未嵌套在 UI 中）
显示所有客户的所有项目列表（是的，未嵌套）

我不确定这样嵌套资源来反映模型关系是否不正确：

/** Creates a nested UI by default: */
this.route('clients', function() {
  this.route('projects', function() {
    this.route('tasks', function() {});
  });
});

我不希望我的 UI 被嵌套并显示所有客户下面的所有项目等

还有比这更好的资源处理方式吗？

// All projects for all clients
this.route('projects', function(){});

// Client's projects
this.route('clientProjects', { path: 'client/:id/projects' }, function() {});

Answer 1

嵌套路由并不一定意味着您必须使用嵌套模板。每个路由都会创建它自己的路由和一个索引子路由。你可以明白我对这个嵌套列表的意思。

* clients
    * clients.index
    * clients.projects
        * clients.projects.index
        * clients.projects.tasks
            * clients.projects.tasks.index

注意： 对于我所说的内容，还有一个更具交互性的表示 at this link。

如果您查看树，您会发现 clients.index 是 clients.projects 的兄弟节点。因此，如果显示 clients.projects 模板，它将替换 clients.index，但仍位于 clients 之下。 clients.projects -> clients.projects.tasks 模板也是如此。

这种区别允许您在每个模板中放置任何您想要的东西，并保留（嵌套）或替换（不）。您可以充分利用所有这些模板来嵌套某些部分而不嵌套某些部分。

例如，如果您在 clients 模板中放置一个客户菜单，并在 clients.index 模板中放置一个包含所有客户统计信息的概览页面，当您导航到 clients.projects 模板，您仍然会看到包含所有客户端的菜单，但概览模板将被替换。

您未明确创建的任何模板都将使用默认 {{outlet}} 为您创建，以便它们可以嵌套。因此，如果您不创建 clients 模板并将所有内容都放在 clients.index 模板中，它仍然可以工作，但是当您导航到 clients.projects 模板时，所有内容都会被替换。

资源

另请注意： resource 将在 2.0 之前弃用，因此建议您在任何地方都使用 route。

Ember-cli实现命令

$ ember new myapp && cd myapp
$ ember g route clients -p
$ ember g template clients/index -p
$ ember g route clients/projects -p
$ ember g template clients/projects/index -p
$ ember g route clients/projects/tasks -p

Ember 具有多个 BelongsTo 关系的非平凡路由器

Ember Non-Trivial Router With Multiple BelongsTo Relationships

ember.js

ember-data

ember-router