为什么我的 Ember.js 插座有时无法有条件地呈现？答案

【问题标题】：Why is my Ember.js outlet failing to conditionally render sometimes?为什么我的 Ember.js 插座有时无法有条件地呈现？
【发布时间】：2013-08-23 02:11:32
【问题描述】：

我正在尝试实现一个非常基本的登录表单。我有这个：

<script type="text/x-handlebars" data-template-name="application">
    {{#if userIsLoggedIn}}
        {{outlet}}
    {{else}}
        {{partial "login"}}
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="_login">
    <div>Username: {{input value=username type="text"}}</div>
    <div>Password: {{input value=password type="password"}}</div>
    <button {{action 'logIn'}}>l o g i n</button>
</script>

首次加载时，它会按预期显示登录表单。

当我登录时，登录表单会消失，正常的东西会按预期呈现到插座中。

在其他地方，我有一个注销按钮，可将 userIsLoggedIn 更改为 false。当我按下它时，正常的东西消失了，登录表单重新出现，正如预期的那样。

此时，一切看起来都与第一次加载时一样。但是，如果我再次登录，我会得到一个空白页面。为什么？

我想也许我不应该在 if 块内有一个出口。但是如果我把它拉出来，我有时必须通过将 userIsLoggedIn 检查复制到其他地方来阻止它被使用。而且我找不到一个可以放置重复检查以产生我想要的行为的地方。 ApplicationRoute.renderTemplate() 似乎是一个自然的地方，但我尝试了很多东西，但没有想出任何方法来打开和关闭我的整个插座层次结构（上面没有显示大部分），只需要一次登录状态检查。

【问题讨论】：

这并没有什么问题..你能把你所做的事情摆弄一下吗..？
是的，这是一个简单的例子（去掉了实际的身份验证，所以你不需要输入用户名或密码）：jsfiddle.net/JQuigley/unzLW/2

标签： login ember.js conditional outlet

【解决方案1】：

J Quigley，看看这个小提琴：http://jsfiddle.net/hjdivad/RBLMW/。我相信它会按照你想要的方式工作。

我试图写一个解释为什么你的小提琴失败了，但我对新路由器的内部结构不够了解，无法对我的回答充满信心。我相信 tl;dr 是这样的：

不要将{{outlet}} 放在可以在当前路由中更改的条件中。

正如丹尼尔建议的那样，我提供的 jsfiddle 用单独的路由替换了条件。基本上，重要的一点是确保依赖于被验证用户的路由层次结构与登录路由层次结构分开，以避免通过缓存路由处理程序意外跳过检查。

【讨论】：

【解决方案2】：

您是否尝试过使用登录路由，如果他们在遇到路由时未登录，您会阻止该路由，并在他们登录后重试？

Info talking about new transitions and an example of how to do what I just said

【讨论】：

我假设您正在谈论“如何重定向到经过身份验证的路由的登录表单”部分。不，我没有尝试过。如果这不起作用，我会尝试。
部分感谢 hjdivad，我现在明白我不应该做我正在做的事情。他的回答是对我提出的问题的一个很好的回答，但我还有一个迄今为止未提及的议程，即试图阻止 Ember 在通过登录过程分流用户时弄乱 URL，所以我需要缓存替换的转换并重试它登录后。因此，这确实是我的正确答案。