我正在尝试实现一个非常基本的登录表单。我有这个:
<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。
首次加载时,它会按预期显示登录表单。
当我登录时,登录表单会消失,正常的东西会按预期呈现到插座中。
在其他地方,我有一个注销按钮,可将 userIsLoggedIn 更改为 false。当我按下它时,正常的东西消失了,登录表单重新出现,正如预期的那样。
在这一点上,一切看起来就像它在第一次加载时所做的那样。但是,如果我再次登录,我会得到一个空白页面。为什么?
我想也许我不应该在 if 块内有一个出口。但是如果我把它拉出来,我有时必须通过将 userIsLoggedIn 检查复制到其他地方来阻止它被使用。而且我找不到一个可以放置重复检查以产生我想要的行为的地方。ApplicationRoute.renderTemplate() 似乎是一个自然的地方,但我尝试了很多东西,但没有想出任何方法来打开和关闭我的整个插座层次结构(上面没有显示大部分),只需要一次登录状态检查。