我有一个页面,用户正在为客户构建订单。在订单的不同阶段,他们可能会达到需要添加其他东西的程度。例如,在为客户选择地址时,客户可能需要添加新地址,或者现有地址可能需要编辑。
我希望能够在右侧边栏中动态加载小组件,但可能有任意数量的组件,所以我不能只有像
这样的东西{{outlet 'right-hand-bar'}}
例如,用户可能已经点击添加地址,但也可能会点击订单中的产品,我希望在添加地址组件下方显示另一个包含产品详细信息的组件。我想这有点像主细节概念,但细节可以包含多个不同的细节。
仅仅拥有一些插座并使用下一个插座是不对的,即
{{outlet 'right-hand-bar1'}}
{{outlet 'right-hand-bar2'}}
...
有没有办法在Ember CLI中执行此操作?单个插座中的X个组件数量?
修改
我正在考虑一个涉及使用主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中卸载组件,而不是在插座中?
答案 0 :(得分:2)
假设您正在运行Ember 1.11+,则可以使用新的component helper
基本上,你可以按照以下方式做点什么:
<强>模板/ 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");
}
}