Ember outlet bound to StateManager doesn't render after changing state twice

Question

I've setup a State Manager for tracking user login state, based on this answer here: Change Navbar based on login state

However, I'd like to take it to the next step and have not only the navbar update according to the state, but the main template itself. I've gotten this mostly working so that when you click on the login button it will show you the 'welcome you're now logged in message.' However, if you logout and try to login again, it just shows a blank screen as if it is not correctly re-rendering the index route. Here's a JSFiddle with my issue. Notice what happens when you click on login / logout and then login a 2nd time. the 'welcome' message is not displayed.

Here is my index template:

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

I can see the 'authState' is correct, but the 'outlet' is not rendered the 2nd time I login...

Here is the complete jsfiddle:

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

CLARIFICATION

@ham asked for a clarification, so here goes:

The main thing I'm trying to accomplish here is that when a state manager changes the state of isAuthenticated then what is currently rendered in {{outlet}} should be swapped out for what is rendered in {{render login}} which could really be any template. The main point is that {{outlet}} will show and hide w/ the state change...

Answer 1

The reason why it doesn't work is because you have two DOM nodes with id index. In your fiddle is extra </script> at the end of HTML pane but it doesn't matter I guess.

ID in DOM must be unique, otherwise you can see some unexpected issues like this one. You can read more here https://developer.mozilla.org/en/docs/DOM/element.id

Here is working fork of your fiddle - http://jsfiddle.net/wbednarski/eMcXq/

BTW, You may find helpful as well - Difference between == and === in JavaScript

Answer 2

You are not transitioning out of your router, but are only changing the state of your LoginStateManager. If you include the routing output in your App creation, you will see the output, and the lack of transitioning out of your "welcome" state.

Just change App to:

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

You will see that using your login-button on the navBar will perform the correct function once, where the button on the login form doesn't transition state, and therefor doesn't show the correct result. This is because in the App.NavBarController you perform this.transitionToRoute("welcome").

Just extend all your logins and logouts with: this.transitionToRoute("welcome") or this.transitionToRoute("index") and it works like a charm.

[edit] Added an example fiddle here: http://jsfiddle.net/AlphaEagle/rGNca/4/ Hope it helps! [/edit]