2

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

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

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

4

1 回答 1

3

您可以使用命名插座并将模板渲染到插座中，在我的应用程序模板中，我有一个名为 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/

于 2013-10-07T13:39:18.660 回答