JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dimweb.se/annat/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/release/ember.prod.js"></script>
<section>
    <p>Expected result:</p>
    <div class="right">
        <h1>Index</h1>
        <p>This is index.</p>
    </div>
    
    <div class="left">
        <h1>Test</h1>
        <p>This is test.</p>
    </div>
</section>

<hr />

<p>Rendered result:</p>
<script type="text/x-handlebars" data-template-name="application">
    <div class="right">
        {{outlet right}}
    </div>
    
    <div class="left">
        {{outlet left}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h1>{{heading}}</h1>
    <p>{{indexContent}}</p>
</script>

<script type="text/x-handlebars" data-template-name="test">
    <h1>{{heading}}</h1>
    <p>{{testContent}}</p>
</script>

CSS

div.right {
    float: right;
}

div.left {
    float: left;
}

hr {
    clear: both;
}

JavaScript

App = Ember.Application.create();

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

App.TestRoute = Ember.Route.extend({
    model: function() {
        return {
            heading: "Test",
            testContent: "This is test."
        }
    }
});

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("test", {
            outlet: "left"
        });
        
        this.render({
            outlet: "right"
        });
    },
    
    model: function() {
        return {
            heading: "Index",
            indexContent: "This is index."
        }
    }
});