Question

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

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

logIn操作更新userIsLoggedIn。

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

当我登录时，登录表单会消失，正常的内容会按预期呈现在插座中。

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

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

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

Answer 1

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

我试图写下你的小提琴失败原因的解释，但我不太了解新路由器的内部结构，以便对我的回答充满信心。我相信 tl; dr就是这样的：

不要将{{outlet}}置于可在当前路线内更改的条件中。

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

Answer 2

您是否尝试过使用登录路线，如果他们在路线上没有登录，您会阻止路线，并在登录后重试？

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

为什么我的Ember.js插座有时无法有条件地渲染？

2 个答案: