JSFiddle - React, Tailwind, and code Playground

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.5.js"></script>
    <script type="text/x-handlebars" data-template-name="root">
        <ul>{{view App.ListView controllerBinding="controller.list"}}</ul>
    </script>

    <script type="text/x-handlebars" data-template-name="list">
        {{#collection contentBinding="controller"}}
            <li>{{content.name}}</li>
        {{/collection}}
    </script>

    <div id="main"></div>

JavaScript

App = Em.Application.create({});

App.RootController = Em.Object.extend({
  init: function() {
    this._super();
    Em.View.create({
      controller: this,
      templateName: 'root'
    }).appendTo('#main');
    return this.set('list', App.ListController.create());
  }
});

App.ListController = Em.ArrayProxy.extend({
  content: [],
  init: function(){
    this.set("content", []);
  },
    
  add: function(name) {
    return this.pushObject(Em.Object.create({
      name: name
    }));
  }
});

App.ListView = Em.View.extend({
  templateName: 'list'
});


    root1 = App.RootController.create();
    root2 = App.RootController.create();
    root1.list.add('One');
    root2.list.add('Two');