Question

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

问题是，传统的Ember路由流需要以特定方式处理视图和模板。具体来说，/sign-in之类的路由会在sign-in模板中呈现application模板，从而删除之前的模板。由于我想保留之前的视图，因此这种方法不起作用。

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

Answer 1

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

<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/

在Ember.js中创建灯箱路线

1 个答案: