JSFiddle - React, Tailwind, and code Playground

by meddle

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 src="http://cloud.github.com/downloads/emberjs/data/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <header>
        <h1>Ember Router Sample</h1>
    </header>
    {{outlet}}
    <footer></footer>
</script>

<script type="text/x-handlebars" data-template-name="myForm">
    bla
    {{view view.mySelectView 
        selectionBinding="controller.selected" 
        contentBinding="view.controller.content.persons"
    }}
    
    {{view Ember.TextField valueBinding="controller.selected.name"}}
    
</script>

CSS

header h1 {
    width: 100%; height: 40px; line-height: 40px; text-align: center;
}
header nav {
    width: 100%; text-align: center; 
}
header nav a {
    color: #008Bff; cursor: pointer;
}
p {
    padding: 20px;
}

JavaScript

App = Ember.Application.create();

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

App.MySelectController = Em.ArrayController.extend();

App.MyFormController = Em.Controller.extend({
    selected: null,
});

App.MyFormView = Ember.View.extend({
    templateName: 'myForm',
    mySelectView: Em.Select.extend({
        optionLabelPath: 'content.name',
        optionValuePath: 'content.id'
    })
});

App.Router = Em.Router.extend({
  enableLogging: true,
//  location: 'hash',
  
  root: Em.Route.extend({
    
    // STATES
    index: Em.Route.extend({
      route: '/',
      connectOutlets: function(router, context) {
          router.get('applicationController').connectOutlet({
              name: 'myForm',
              context: Ember.Object.create({
                  persons: [{id:0, name: "Wayne"}, {id: 1, name: "Gart"}]
              })
          });
      }
    })
  })
});
App.initialize();