Problem

问题

You want to show part of your UI in a modal dialog.

希望用模态窗口来显示一部分UI。

Solution

解决方案

Render a specific controller into a named modal outlet in your application template.

渲染一个指定的控制器到应用模板中一个名为modal的插口（outlet）。

Discussion

讨论

You can use a route’s render method to render a specific controller and template into a named outlet. In this case we can setup our application template to handle the main outlet and a modal outlet:

可以使用路由的render方法来渲染一个指定的控制器和模板到一个命名插口（outlet）。这样的情况下，可以设置应用模板来出来主插口（outlet）和一个模态插口（outlet）。

  1. {{outlet}}
  2. {{outlet modal}}

Then you can render a controller and template into the modal outlet. Sending an action in a template will propagate to the application route’s actions.

这样就可以渲染一个控制器和模板到modal插口（outlet）。在模板中触发一个操作，该操作会被传播到应用路由的操作哈希。

In a template:

模板如下：

  1. <button {{action 'openModal' 'myModal'}}>Open modal</button>

In your application route:

应用路由如下：

  1. App.ApplicationRoute = Ember.Route.extend({
  2.   actions: {
  3.     openModal: function(modalName) {
  4.       return this.render(modalName, {
  5.         into: 'application',
  6.         outlet: 'modal'
  7.       });
  8.     }
  9.   }
  10. });

When closing a modal, you can use the route’s disconnectOutlet method to remove the modal from the DOM.

当关闭模态对话框时，可以使用路由的disconnectOutlet方法来将模态对话框从DOM中删除。

  1.   closeModal: function() {
  2.     return this.disconnectOutlet({
  3.       outlet: 'modal',
  4.       parentView: 'application'
  5.     });
  6.   }

It may also be helpful to use a modal-dialog component to handle common markup and interactions such as rendering an overlay and handling clicks outside of the modal.

使用一个modal-dialog组件来处理通用标记和交互也是非常有用的。例如渲染一个叠加层，并处理在模态对话框外的点击事件。

Example

例子

This example shows:

本例中包含：

  1. Rendering a pop-up modal in a named outlet.
  2. Sending a specific model to the modal controller.
  3. Wrapping the common modal markup and actions in a component.

  4. Handling events to close the modal when the overlay is clicked.

  5. 渲染一个弹出模态对话框到一个命名插口（outlet）。

  6. 发送一个特定的模型到模态控制器。
  7. 将通用模态对话框标记和操作包裹到一个组件中。
  8. 处理叠加层被点击的事件，来关闭模态对话框 。

JS Bin