一个应用程序中的不同UI /模板

Question

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

玩了一会儿之后,我想我会尝试在应用程序模板中使用两个命名出口:

{{outlet main}}

{{outlet alternative}}

然后我有一个主模板:

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

哪个被渲染{{outlet main}}(我使用的是Ember App Kit,所以下面相当于App.ApplicationRoute = Ember.Route.extend({...):

export default Ember.Route.extend({

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

});

现在,问题在于我想要吹掉主模板,并且完全具有与页面不同的外观和感觉,例如全屏登录页面,没有包装器/侧边栏或页脚.

我以为我可以{{outlet main}}在LoginRoute中使用disconnectOutlet 停用,只需将新的登录模板推送到{{outlet alternative}}:

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.但是,如果你想要更低级别并且完全换掉应用程序每个路由使用的主模板,那么它仍然很容易做到.以这个jsbin为例.