JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://gist.github.com/raw/2931791/ember.js"></script>
<script type="text/x-handlebars">
    <h1>Redirection</h1>
    
    <div class="outlet">
        {{outlet}}
    </div>
    
    <p>Current Path: <b>{{currentPath}}</b> &larr; should be loggedOut.index</p>
</script>

<script type="text/x-handlebars" data-template-name="loggedOut/index">
    <h2>logged out</h2>
</script>

<script type="text/x-handlebars" data-template-name="loggedIn/index">
    <h2>logged in</h2>
    <p>
        This should never get rendered as LoggedInRoute always transitions to loggedOut.
    </p>
    <p>
        Also seems to be rendered outside the outlet (the bordered area).
    </p>
    <p>
        Transition log show it transitioning into both loggedOut and loggedIn:
    </p>
    <pre>
Transitioned into 'loggedOut.index'
Transitioned into 'loggedIn.index' 
    </pre>
</script>

CSS

body {
    padding: 0.5em;
}

.outlet {
    border: 1px solid #CCC;
    padding: 0.5em;
    margin: 0.5em 0;
}

h1 {
    font-weight: bold;
    font-size: 1.2em;
}

h2 {
    font-weight: bold;
    font-size: 1.1em;    
}

p, pre {
   padding: 0.5em;   
}

JavaScript

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

App.LoggedInRoute = Ember.Route.extend({
    redirect: function() {
       this.transitionTo("loggedOut");
    }
});

App.Router.map(function() {
    this.resource("loggedOut", function(){
    });
    this.resource("loggedIn", {path: "/"}, function(){
    });
});