JSFiddle - React, Tailwind, and code Playground

by scispear

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
<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-1.0.pre.js"></script>
<div data-role="page" id="test">
     <script type="text/x-handlebars">
        {{#view App.MyView}}
          <h1>Sample Ember.js + jQuery Mobile App</h1>
          {{#view App.Button target="App.listController" action="addMore"}}Add More Items{{/view}}
          <br/>
          {{#collection App.ListView contentBinding="App.listController"}}
            <a href="#">
                <img {{bindAttr src="content.thumbnail"}}/>
                <h3>{{content.title}}</h3>
                <p>{{content.description}}</p>
            </a>
          {{/collection}}
        {{/view}}
    </script>
</div>

JavaScript

var App = Em.Application.create({
    ready : function () {
        console.log('Ember is ready');
    }
});


// Base classes for jQueryMobile Support
// In a 'real' implementation, this should be broken out into its own Ember.js module/extension.
App.MobileBaseView = Em.View.extend({
    attributeBindings:['data-role']
});

App.PageView = App.MobileBaseView.extend({
    'data-role': 'page'
});

App.ToolbarBaseView = App.MobileBaseView.extend({
    attributeBindings:['data-position'],
    'data-position': function() {
        console.log('ToolbarBaseView');
        if (this.get('isFullScreen')) {
            return 'fullscreen'
        }

        if (this.get('isFixed')) {
            return 'fixed'
        }
        return ''
    }.property('isFixed', 'isFullScreen').cacheable(),

    isFixed: true,
    isFullsScreen: false
});

App.HeaderView = App.ToolbarBaseView.extend({
    'data-role': 'header'

});

App.ContentView = App.MobileBaseView.extend({
    'data-role': 'content'
});

App.FooterView = App.MobileBaseView.extend({
    'data-role': 'footer'
});

App.ListItemView = Em.View.extend({
    tagName: 'li'
});

App.ListView = Em.CollectionView.extend({
    attributeBindings: ['data-role'],
    'data-role':'listview',
    tagName: 'ul',
    itemViewClass: App.ListItemView,

    // Observe the attached content array's length and refresh the listview on the next RunLoop tick.
    contentLengthDidChange: function(){
        console.log('listview changed');
        var _self = this;
        Em.run.next(function() {
            _self.$().listview('refresh');
        });
    }.observes('content.length')

});

App.Button = Em.Button.extend({
    // Simple marker for consistency with the App.ViewName convention. jQuery Mobile automatically styles buttons.
});

// App Classes

App.sampleFixture = [
    Em.Object.create({
        title: 'Broken Bells',
        description: 'Broken Bells',
        thumbnail:...