不同的Ember路由或在其自己的上下文中显示两个复杂视图

Question

我有一个不同相关问题的应用。我左边的项目列表会影响右边的一些项目（想想Github问题），但这里有一个模型

一切都很好，我点击了第一项，有些事情发生在右边。但是，左侧的列表有自己的路由要求，它是具有嵌套路由的项目的资源。例如，当我们点击Create New Item时，我们会显示一个新的内联形式（见左下角）

当我这样做时，即使它位于不同的插座上，它也会覆盖当前在其他插座中呈现的内容。在这种情况下，产品在右边。

如果我们可以为不同的部分设置不同的routers，那将是理想的。我知道我可以调用渲染并创建一个新的视图/控制器，但这需要我处理我自己的状态（我创建一个新项目，编辑它，查看索引等）。

我目前正在研究查询参数作为选项。

有什么想法吗？

Answer 1

我尝试了很多方法来解决这个问题，并最终得到一条路线，其中包含需要共存的所有各种路线，然后使用{{render}}渲染剩余的父路线，并使这些路线成为renderTemplate挂起一个NOOP（你必须专门做这个，否则你会得到断言错误，你使用单例形式的渲染两次）。

但是你不必管理你自己的状态 - 你仍然可以使用嵌套路由和它们的模型钩子，并且因为你使用单{{render}}形式的东西仍然会自动渲染到它们的正确斑点。换句话说：如果你使用{{render}}的单例形式，路由可以通过model挂钩设置控制器模型，如果路由与控制器具有相同的名称，或者在使用model的其他路线的setupController或controllerFor挂钩。

你也可以在renderTemplate钩子中渲染到命名的出口，但我最终放弃了这种方法，因为我仍然遇到了在我不想断开连接的东西上调用disconnectOutlet的问题。

关于一些悬而未决的问题的讨论表明，最终可能有一种方法可以控制路线是否/何时被拆除以及它们的连接断开，但只有当一种方法已经解决时才会增加内存泄漏让人们以平常的方式做事。

Answer 2

可以注册不同的路由器并将其注入控制器。来自ember的源代码：

/**
@private

This creates a container with the default Ember naming conventions.
It also configures the container:
....
* all controllers receive the router as their `target` and `controllers`
  properties
*/

buildContainer: function(namespace) {
    var container = new Ember.Container();

    // some code removed for brevity... 
    container.register('controller:basic', Ember.Controller, { instantiate: false });
    container.register('controller:object', Ember.ObjectController, { instantiate: false });
    container.register('controller:array', Ember.ArrayController, { instantiate: false });
    container.register('route:basic', Ember.Route, { instantiate: false });

    container.register('router:main',  Ember.Router);

    container.injection('controller', 'target', 'router:main');
    container.injection('controller', 'namespace', 'application:main');

    container.injection('route', 'router', 'router:main');

    return container;
}

可以创建第二个路由器，向容器注册并注入某些控制器：

    App.Router = Ember.Router.extend();
    App.Router.map function () {...}

然后注册

    container.register('router:secondary',  App.Router);
    container.injection('controller:list', 'target', 'router.secondary');