JSFiddle - React, Tailwind, and code Playground

by drulia

HTML

<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script src="http://elipster.net/misc/ember-data.js"></script>
<div id="content"></div>

<script type="text/x-handlebars">
   
    {{outlet}}
    
</script>

<script type="text/x-handlebars" data-template-name="index">
    {{#linkTo index/foo}}Go to Foo{{/linkTo}} <br>
    {{#linkTo index/bar}}Go to Bar{{/linkTo}} <hr>
    text inside index template
    <hr>
    {{outlet}}
    {{outlet sidebar}}
</script>
    
<script type="text/x-handlebars" data-template-name="index/bar">
    text from bar <br>
    {{#linkTo index/foo}}Back{{/linkTo}}
</script>

<script type="text/x-handlebars" data-template-name="sidebar">
    <div class="sidebar">
        This is sidebar
    </div>
</script>

CSS

#content {
    margin: 20px;
}
.sidebar {
    position: absolute;
    right: 0;
    top: 0px;
    bottom: 0px;
    width: 30%;
    background: grey;
    color: white;
}

JavaScript

App = Ember.Application.create({
	rootElement: '#content'
});

App.IndexController = Ember.ObjectController.extend({
    
});

App.IndexRoute = Ember.Route.extend({
	renderTemplate: function() {
		this._super();
        // uncomment the line below to see how link 'Go to Bar'
        // will stop work and {{outlet}} will stay empty
		//this.render('sidebar', { into: 'index', outlet: 'sidebar' });
	}
});


App.Router.map(function() {
	this.resource('index', {path: '/'}, function() {
		this.route('foo', {path: '/'});
		this.route('bar');
	});
});