在 Ember.js 中创建灯箱路由答案

【问题标题】：Creating a Lightbox Route in Ember.js在 Ember.js 中创建灯箱路由
【发布时间】：2013-10-06 19:01:14
【问题描述】：

我的身份验证系统使用灯箱，因此当用户单击“登录”或“注册”时，会弹出一个灯箱供他们输入凭据。他们所在的页面仍然呈现在灯箱后面，当他们完成登录后，灯箱消失并且视图恢复到原来的样子。当我通过使用大量 Jquery 偏离传统的 Ember 路由流程时，我可以让它工作，但我更愿意将它更紧密地集成到我的 Ember 应用程序的其余部分中。

问题是，传统的 Ember 路由流程需要以特定方式处理视图和模板。具体来说，像/sign-in 这样的路由将在application 模板中渲染sign-in 模板，从而擦除之前存在的所有内容。由于我想保留以前的视图，因此这种方法不起作用。

有没有办法告诉 Ember 视图不要擦除当前视图，而是渲染一个独立的视图，例如灯箱？

【问题讨论】：

标签： ember.js

【解决方案1】：

您可以使用命名的插座并将模板渲染到插座中，在我的应用程序模板中，我有一个名为 modal 的插座，以及 ApplicationRoute 中的两个操作，openModal 和 closeModal。 open 接收一个模板名称并使用 route 方法 render 设置出口内容，close 渲染一个空模板。

App.ApplicationRoute = Ember.Route.extend({
    actions: {
        openModal: function(modal) {
            this.render(modal, {into:'application', outlet: 'modal'});
        },
        closeModal: function() {
            this.render('empty', {into: 'application', outlet: 'modal'});
        },
    }
});

HTML 把手

<script type="text/x-handlebars" data-template-name="application">
{{! Other application template code}}
<button {{action openModal 'hellow.modal'}}>Open it!</button>
{{outlet modal}}

</script>
<script type="text/x-handlebars" data-template-name="empty"></script>
<script type="text/x-handlebars" data-template-name="hellow/modal">
<div class="modal">
    <div class="modal-header">
      Hellow
    </div>
    <div class="modal-footer">
      <button {{action closeModal}}>Close</button>
    </div>
</div>
</script>

本文改编自http://nerdyworm.com/blog/2013/04/20/ember-modal-example/

【讨论】：

解决问题的巧妙方法。
您也可以断开文档中提到的插座，而不是渲染一个空模板。 this.disconnectOutlet({outlet: 'modal', parentView: 'application'});