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

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

在玩了一段时间之后，我想我应该尝试在应用程序模板中使用两个命名的outlet：

{{outlet main}}

{{outlet alternative}}

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

然后我有一个主模板：

{{outlet main}}

{{outlet alternative}}

{{partial "wrapper"}}

{{outlet}}

{{partial "footer"}}

它被呈现到

{{outlet main}}

中（我使用的是Ember应用程序工具包，因此下面的代码相当于App.ApplicationRoute=Ember.Route.extend（{…）：

现在，问题是当我想要吹走主模板，并有一个完全不同的页面外观和感觉，像一个全屏登录页面，没有包装器/边栏或页脚

我想我可以在我的LoginRoute中使用disconnectOutlet停用

{{{outlet main}}

，然后将新的登录模板推到

{{outlet alternative}}

，如下所示：

export default Ember.Route.extend({

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

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

});

但是，这会导致

{{outlet main}}

仍然被呈现（我想是因为LoginRoute的ApplicationRoute-renderTemplate没有覆盖它？），并且登录模板呈现在它下面（也称为页面下方/折叠下方）

---

有人知道如何在Ember中完成UI的完全切换吗？

我想知道为什么没有一个选项可以自己创建多个应用程序模板，但我认为您可以通过让您的应用程序模板简单地呈现一个出口来实现您的目标：

模板/应用程序.hbs

{{outlet}}

{{view 'TopNav'}}
{{view 'Blog'}}
{{view 'Footer'}}

{{view 'Blog'}}

然后，您可以使用嵌套视图和组件分解应用程序：

模板/main.hbs

{{outlet}}

{{view 'TopNav'}}
{{view 'Blog'}}
{{view 'Footer'}}

{{view 'Blog'}}

模板/备选方案.hbs

{{outlet}}

{{view 'TopNav'}}
{{view 'Blog'}}
{{view 'Footer'}}

{{view 'Blog'}}

---

这是绝对可能的。根据您的使用情况，如果您只想拆除某些特定路线的插座，您可以使用。但是，如果您想更低级，完全替换应用程序在每条路线上使用的主模板，这仍然非常容易。请看一个例子。

非常适合渲染正常路由层次结构之外的内容，建议在中使用

创建目标：

{{from-elsewhere name="my-right-sidebar"}}

在应用程序中的任何其他位置，声明应在目标中呈现哪个组件，并完成绑定的输入和操作：

{{to-elsewhere named="my-right-sidebar"
  send=(component "cool-thing"
  model=model launch=(action "launchIt"))}}

---

这里还有更多的例子：

谢谢你的回答，亚伦！我想我也尝试过类似的东西，但我想当我用一个

{{outlet}来呈现一些东西时

在application.hbs中，每当我转到另一条路线时，整个出口都会被替换/重新提交，这对于我网站上99%的页面来说似乎有些过分。我想我可以在main.hbs中放置一个名为content的命名出口，并将大部分内容指向该出口，这样基本出口就不需要在每条路线上都被覆盖ge？仅在特定路由上？是的，您肯定不想在每次路由更改时重新呈现整个布局。回顾您使用disconnectOutlet所做的工作，我认为您在变量名称中有一个错误。我没有使用disconnectOutlet，我必须查找它到底做了什么。github上的此提交引用了函数（）disconnectOutlet的正确语法似乎是“from”not“into”。如果这解决了您的问题，请告诉我。这很完美。过去几周一直在使用它，没有遇到任何问题。干杯！亚当！完美！您真是太棒了@Adam。非常感谢！