Question

我已根据此答案设置状态管理器以跟踪用户登录状态：Change Navbar based on login state

但是，我想把它带到下一步，不仅根据状态更新导航栏，而且还有主模板本身。我已经得到了这个大部分工作，所以当你点击登录按钮时它会显示'欢迎你现在登录的消息。'但是，如果您注销并尝试再次登录，它只会显示一个空白屏幕，就好像它没有正确地重新呈现索引路径一样。这是我的问题的JSFiddle。注意当您单击登录/注销然后第二次登录时会发生什么。 <欢迎'消息未显示。

这是我的索引模板：

    {{render navbar}}
        {{authState}}
{{#if isAuthenticated}}
    {{outlet}}
{{else}}
    {{render login}}
{{/if}}

我可以看到'authState'是正确的，但第二次登录时没有呈现'outlet'...

这是完整的jsfiddle：

http://jsfiddle.net/Benmonro/HmJyu/1/

澄清

@ham要求澄清，所以这里是：

我在这里要完成的主要事情是，当状态管理器更改isAuthenticated的状态时，{{outlet}}中当前呈现的内容应该换出{{render login}}中呈现的内容。 1}}这可能真的是任何模板。重点是{{outlet}}将显示和隐藏状态变化......

Answer 1

它不起作用的原因是因为你有两个标识为index的DOM节点。在你的小提琴中，在HTML窗格的末尾是额外的</script>，但我认为并不重要。

DOM中的ID必须是唯一的，否则您可以看到一些像这样的意外问题。您可以在此处阅读更多内容https://developer.mozilla.org/en/docs/DOM/element.id

这是你小提琴的工作 - http://jsfiddle.net/wbednarski/eMcXq/

顺便说一下，你也可以找到帮助 - Difference between == and === in JavaScript

Answer 2

您没有从router过渡，只是改变了LoginStateManager的状态。如果您在App创建中包含路由输出，您将看到输出，并且没有从“欢迎”状态转换出来。

只需将App更改为：

App = Ember.Application.create（{LOG_TRANSITIONS：true}）;

您会看到使用login上的navBar - 按钮将执行一次正确的功能，其中login表单上的按钮不会转换状态，因此不会没有显示正确的结果。这是因为在App.NavBarController执行this.transitionToRoute("welcome")。

只需使用以下命令扩展所有登录和注销： this.transitionToRoute("welcome")或this.transitionToRoute("index")，它就像一个魅力。

[edit]在这里添加了一个示例小提琴：http://jsfiddle.net/AlphaEagle/rGNca/4/希望它有所帮助！ [/编辑]

绑定到StateManager的Ember插口在更改状态两次后不会渲染

2 个答案: