ember.js - 一个应用程序中的不同 UI/模板

Question

有一种情况我想要两种类型的界面。一种是默认应用程序，另一种是用于登录屏幕等的全屏模式。

玩了一段时间后，我想尝试在应用程序模板中使用两个命名 socket :

{{outlet main}}

{{outlet alternative}}

然后我就有了一个主模板:

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

通过(我使用的是 Ember App Kit，所以下面的内容相当于 App.ApplicationRoute = Ember.Route.extend({... ):

export default Ember.Route.extend({

    renderTemplate: function() {
        this._super();
        this.render('master', {
            outlet: 'main',
            into: 'application'
        });
    },

});

现在，问题是当我想要删除主模板，并为页面提供完全不同的外观和感觉时，例如全屏登录页面，没有包装器/侧边栏或页脚。

我想我可以在 LoginRoute 中使用 disconnectOutlet 停用 {{outlet main}} ，然后将新的登录模板推送到 {{outlet replacement}} ，如下所示:

export default Ember.Route.extend({

  renderTemplate: function() {
    this.disconnectOutlet({
        outlet: 'main',
        into: 'application'
    });

    this.render('login', {
        outlet: 'alternative',
        into: 'application'
    });
  },

});

但这会导致 {{outlet main}} 仍然被渲染(我想是由于 ApplicationRoute - LoginRoute 的 renderTemplate 没有覆盖它？)，并且登录模板在其下方渲染(又名，页面下方/首屏下方)。

有人知道如何在 Ember 中执行 UI 的完整切换吗？

Answer 1

这绝对是可能的。根据您的用例，如果您只想拆除特定路线的一些导出，您可以使用 disconnectOutlets 。但是，如果您想要比这更底层并完全替换应用程序在每个路由中使用的主模板，这仍然很容易做到。看看this jsbin举个例子。