JSFiddle - React, Tailwind, and code Playground

by hekevintran

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.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet navigation}}
    {{outlet content}}   
</script>

<script type="text/x-handlebars" data-template-name="navigation">
    <a {{action showMap href="true"}}>Map</a>
    <a {{action showSettings href="true"}}>Settings</a>
</script>

<script type="text/x-handlebars" data-template-name="settings">
    <p>Settings</p>
</script>

<script type="text/x-handlebars" data-template-name="map">
    {{view view.MapView}}
</script>

JavaScript

App = Em.Application.create();

App.ApplicationController = Em.Controller.extend();

App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        showMap: Ember.Route.transitionTo('map'),
        showSettings: Ember.Route.transitionTo('settings'),
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                router.transitionTo('map');
            }
        }),
        map: Ember.Route.extend({
            route: '/map',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('navigation', 'navigation');
                router.get('applicationController').connectOutlet('content', 'map');
            }
        }),
        settings: Ember.Route.extend({
            route: '/settings',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('navigation', 'navigation');
                router.get('applicationController').connectOutlet('content', 'settings');
            }
        })
    })
});


App.NavigationController = Em.Controller.extend();

App.NavigationView = Em.View.extend({
    templateName: 'navigation'
});

App.SettingsController = Ember.Controller.extend();

App.SettingsView = Ember.View.extend({
    templateName: 'settings'
});

App.MapController = Ember.Controller.extend();

App.MapView = Ember.View.extend({
    templateName: 'map',
    MapView: Ember.View.extend({
        map: null,
        didInsertElement: function() {
            var mapOptions = {
                center: new google.maps.LatLng(40.714353, -74.005973),
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
            };

            var map = new google.maps.Map(this.$().get(0),mapOptions);
            this.set('map',map);
            this.$().css({ width:...