JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://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 type="text/x-handlebars" data-template-name="application">
  {{view MyApp.NavigationView}}
  {{outlet}}
  {{view MyApp.FooterView}}
</script>
<script type="text/x-handlebars" data-template-name="navigation">
  <div>Navigation goes here</div>
</script>
<script type="text/x-handlebars" data-template-name="footer">
  <div>Footer goes here</div>
</script>
<script type="text/x-handlebars" data-template-name="foo">
  <div>This is FooView. Bound value of "bar" is {{bar}}</div>
</script>

JavaScript

MyApp = Ember.Application.create({
  autoinit: false
});

MyApp.router = Ember.Router.create({
  root: Ember.Route.extend({
    index: Ember.Route.extend({
      route: '/',
      connectOutlets:function(router, context){
        router.get('applicationController').connectOutlet('foo');
      }
    })
  })
});
MyApp.ApplicationController = Ember.Controller.extend({
});
MyApp.FooController = Ember.Controller.extend({
    bar: 'baz'
});

MyApp.NavigationView = Ember.View.extend({
  templateName: 'navigation'
});
MyApp.FooterView = Ember.View.extend({
  templateName: 'footer'
});
MyApp.FooView = Ember.View.extend({
  templateName: 'foo'
});


MyApp.initialize(MyApp.router);