使用 Ember 在侧边栏中加载和卸载多个组件

Question

我有一个页面，用户在其中为客户建立订单。在订单的不同阶段，他们可能会到达需要添加其他内容的地步。例如，在为客户选择地址时，客户可能需要添加新地址，或者可能需要编辑现有地址。

我希望能够在右侧边栏中动态加载小组件，但它们可能有任意数量，所以我不能只拥有类似的东西

{{outlet 'right-hand-bar'}}

例如，用户可能已经单击添加地址，但随后也可能单击订单中的产品，我想在添加地址组件下方显示另一个包含产品详细信息的组件。我想这有点像主细节概念，但细节可以包含多个不同的细节。

仅仅拥有多个插座并使用下一个可用的插座是不合适的，即

{{outlet 'right-hand-bar1'}}
{{outlet 'right-hand-bar2'}}
...

有没有办法在 Ember CLI 中执行此操作？单个插座中有 X 个组件？

编辑

我正在考虑一个涉及创建带有主 div 的侧边栏组件的概念

<div class='side-bar-load-area'></div>

然后在 sideBar 组件中有一个 loadComponent 操作，该操作采用要加载的组件的名称。

不确定如何按名称加载组件？我已经为控制器看到了这个：

var comp = App.FooBarComponent.create();
comp.appendTo('#someArea');

和

this.controllerFor('someName');

所以理想情况下希望将它结合起来并让它为我的子组件工作？

并且还给侧边栏一个 closeComponent 动作，给定的组件可以调用它来卸载自己，对于一个插座，你会这样做

closeOutlet: function() {
  return this.disconnectOutlet({
    outlet: 'modal',
    parentView: 'application'
  });
}

所以再次只是希望将其翻译为在 DOM 中卸载组件，而不是在插座中？

Answer 1

假设您运行的是 Ember 1.11+，您可以使用新的 component helper

基本上，您可以按照以下方式做一些事情：

templates/main_view.hbs

<div class="sidebar">
  {{#each componentNames as |componentName|}}
    {{component componentName}}
  {{/each}}
</div>

以及用于在以下位置创建所述组件的按钮：

templates/main_view.hbs

<button {{action "addAddress"}}>New address</button>

以及控制器中的操作本身：

controllers/main_view.js

actions: {
  addAddress: function() {
    var controller = this;
    var componentNames = controller.get("componentNames");
    componentNames.pushObject("address");
  }
}