5

我已经设置了一个状态管理器来跟踪用户登录状态，基于这里的答案：Change Navbar based on login state

但是，我想将其带到下一步，不仅根据状态更新导航栏，还包括主模板本身。我已经完成了这项工作，因此当您单击登录按钮时，它会向您显示“欢迎您现在已登录”消息。但是，如果您注销并尝试再次登录，它只会显示一个空白屏幕，就好像它没有正确地重新渲染索引路由一样。这是我的问题的 JSFiddle。请注意当您单击登录/注销然后第二次登录时会发生什么。不显示“欢迎”消息。

这是我的索引模板：

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

我可以看到“authState”是正确的，但“插座”在我第二次登录时没有呈现...

这是完整的jsfiddle：

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

澄清

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

我在这里要完成的主要事情是，当状态管理器更改状态时，应该将isAuthenticated当前渲染的{{outlet}}内容换成{{render login}}实际可以是任何模板的渲染内容。要点是{{outlet}}它将显示和隐藏状态变化......

4

2 回答 2

2

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

只需更改App为：

App = Ember.Application.create({ LOG_TRANSITIONS: true });

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

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

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

于 2013-05-01T21:37:09.450 回答
2

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

DOM 中的 ID 必须是唯一的，否则你会看到像这样的一些意想不到的问题。你可以在这里阅读更多https://developer.mozilla.org/en/docs/DOM/element.id

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

顺便说一句，您可能会发现也很有帮助 - JavaScript 中 == 和 === 之间的区别

于 2013-05-01T03:15:14.167 回答