我有一个页面，用户在此页面上为客户建立订单。在订单的各个阶段，他们可能会达到需要添加其他内容的地步。例如，当为客户选择地址时，客户可能具有需要添加的新地址，或者可能需要编辑现有地址。
我希望能够在右侧边栏中动态加载小组件，但是可以有任意数量，所以我不能只拥有类似的东西
{{outlet 'right-hand-bar'}}
例如，用户可能单击了添加地址，但随后又可能单击了订单中的产品，而我想在添加地址组件下方显示另一个包含该产品详细信息的组件。我想这有点像主要的细节概念，但是细节可以包含多个不同的细节。
仅拥有多个出口并使用下一个可用的出口是不合适的，即
{{outlet 'right-hand-bar1'}}
{{outlet 'right-hand-bar2'}}
...
在Ember CLI中有没有办法做到这一点？一个插座中有X个组件？
编辑
我正在考虑一个涉及使用main div创建sideBar组件的概念
<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中而不是在插座中卸载组件吗？
假设您正在运行Ember 1.11+，则可以使用新的组件帮助器
基本上，您可以按照以下方式进行操作：
模板/main_view.hbs
<div class="sidebar">
{{#each componentNames as |componentName|}}
{{component componentName}}
{{/each}}
</div>
和用于在以下位置创建所述组件的按钮：
模板/main_view.hbs
<button {{action "addAddress"}}>New address</button>
以及控制器中的动作本身：
控制器/main_view.js
actions: {
addAddress: function() {
var controller = this;
var componentNames = controller.get("componentNames");
componentNames.pushObject("address");
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句