JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
{{outlet sidebar}}
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="navigation">
Sidebar
</script>
<script type="text/x-handlebars" data-template-name="content">
Content
</script>
JavaScript
(function() {
$(function() {
App = Em.Application.create({});
App.ApplicationController = Em.Controller.extend({});
App.ApplicationView = Em.View.extend({
templateName: 'application'
});
App.NavigationController = Em.Controller.extend({});
App.NavigationView = Em.View.extend({
templateName: 'navigation'
});
App.ContentController = Em.Controller.extend({});
App.ContentView = Em.View.extend({
templateName: 'content'
});
App.Router = Em.Router.extend({
enableLogging: true,
root: Em.Route.extend({
index: Em.Route.extend({
route: '/',
connectOutlets: function(router) {
router.get('applicationController').connectOutlet('sidebar', 'navigation');
router.get('applicationController').connectOutlet('content');
}
})
})
});
window.App = App;
return App.initialize();
});
}).call(this);