发布于 2015-08-18 16:32:58 | 219 次阅读 | 评论: 0 | 来源: 网络整理
希望用模态窗口来显示一部分UI。
渲染一个指定的控制器到应用模板中一个名为modal的插口（outlet）。
可以使用路由的render方法来渲染一个指定的控制器和模板到一个命名插口（outlet）。这样的情况下，可以设置应用模板来出来主插口（outlet）和一个模态插口（outlet）。
1 2 |
{{outlet}}
{{outlet modal}}
|
这样就可以渲染一个控制器和模板到modal插口（outlet）。在模板中触发一个操作，该操作会被传播到应用路由的操作哈希。
模板如下：
1 |
<button {{action 'openModal' 'myModal'}}>Open modal</button>
|
应用路由如下：
1 2 3 4 5 6 7 8 9 10 |
App.ApplicationRoute = Ember.Route.extend({
actions: {
openModal: function(modalName) {
return this.render(modalName, {
into: 'application',
outlet: 'modal'
});
}
}
});
|
当关闭模态对话框时，可以使用路由的disconnectOutlet方法来将模态对话框从DOM中删除。
1 2 3 4 5 6 |
closeModal: function() {
return this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
|
使用一个modal-dialog组件来处理通用标记和交互也是非常有用的。例如渲染一个叠加层，并处理在模态对话框外的点击事件。
本例中包含：