JSFiddle - React, Tailwind, and code Playground

by bazzel

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="search">
  {{view App.SearchTextFieldView id="user_name"}}
</script>

<script type="text/x-handlebars" data-template-name="user">
  Hello, {{username}}!
</script>

CSS

#user_name {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: rgba(0, 0, 0, 0.6) 0 0 10px -2px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 0 0 10px -2px;
  -o-box-shadow: rgba(0, 0, 0, 0.6) 0 0 10px -2px;
  box-shadow: rgba(0, 0, 0, 0.6) 0 0 10px -2px;
  color: #999;
  background-color: white;
  width: 588px;
  font-size: 30px;
  font-family: Helvetica, sans-serif;
  padding: 5px;
  border: 1px solid #BBB;
  font-weight: 500;
}

JavaScript

App = Ember.Application.create();

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

App.SearchController = Em.Object.extend({
    displayUserProfile: function(username) {
        this.get('target').transitionTo('displayUserProfile', {
            username: username
        });
    }
});
App.SearchView = Em.View.extend({
    templateName: 'search'
});

App.UserController = Em.ObjectController.extend();
App.UserView = Em.View.extend({
    templateName: 'user'
});

App.SearchTextFieldView = Em.TextField.extend({
    placeholder: 'Enter username',
    insertNewline: function() {
        // Do I invoke a method on the (parent) view's controller...
        Em.tryInvoke(this.get('controller'), 'displayUserProfile', this.get('value').w());

        // ...or call the router directly?
//        App.router.transitionTo('displayUserProfile', {
//            username: this.get('value')
//        });
    }
});

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    root: Em.Route.extend({
        index: Em.Route.extend({
            route: '/',
            redirectsTo: 'search.index'
        }),
        search: Em.Route.extend({
            route: '/search',
            index: Em.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    router.get('applicationController').connectOutlet('search');
                }
            }),
            displayUserProfile: Em.Route.extend({
                route: '/:username',
                connectOutlets: function(router, context) {
                    var user, username;
                    username = context.username;
                    // For simplicity reasons, in a real app I would use ember-data:
                    user = Em.Object.create({
                        username: username
                    });
                   ...