JSFiddle - React, Tailwind, and code Playground

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 type="text/x-handlebars">
  
   {{#view  Todos.TodoFormView}}
     {{view view.TodoView viewName="TodoViewInstance" id="new todo" placeholder="what needs to be done"  }}
    {{view Ember.TextField placeholder="another field"}}
    <button {{action submit target="view" }}>  add </button>
     {{/view}} 
     
    <br/>
    
 <div id="stats">
  <button {{action clearCompletedTodo  target="Todos.todoController" }} >
    Clear Completed Todos
     </button>

     <br/>
  {{Todos.todoController.remaining}} remaining todos:
</div>   
    
    <br/>
    
 {{view Ember.Checkbox class="mark-all-done"
  title="Mark All as Done"
  disabledBinding="Todos.todoController.isEmpty"
  valueBinding="Todos.todoController.allAreDone"}}
   
    <br/>
    
    <ul>
{{#each Todos.todoController}}
  <li {{bindAttr class="isDone"}}>
    {{view Ember.Checkbox titleBinding="title" valueBinding="isDone"}}
  </li>
{{/each}}
</ul>
    
</script>

JavaScript

Todos = Ember.Application.create();

Todos.Todo = Em.Object.extend({
    title:  null,
    isDone: false   
});

Todos.todoController = Em.ArrayController.create({
    content: [],
    
    createTodo: function(title) {
        //var todo = Todos.Todo.create({title: title});
       // this.pushObject(todo);
            this.unshiftObject(Todos.Todo.create({title: title}));
        
    },
    
    clearCompletedTodo: function(){
      this.filterProperty('isDone', true).forEach(this.removeObject, this);
    },
    
    remaining: function(){
      return this.filterProperty('isDone', false).get(length);
    }.property('@each.isDone'),
    
    isEmpty: function(){
     return this.get('length') === 0;
    }.property('length'),
     
    allAreDone: function(key, value) {
    if (arguments.length === 2) {
      this.setEach('isDone', value);

      return value;
    } else {
      return !this.get('isEmpty') && this.everyProperty('isDone', true);
    }
  }.property('@each.isDone')                                                 
                                                 
    
});

Todos.TodoFormView = Em.View.extend({
    tagName: 'form',
    //controller: null,
    
    TodoView: Ember.TextField.extend({
  //insertNewline:
     
  }),
     
  
   submit:  function() {
        
      var value = this.get('value');

     if (value) {
       Todos.todoController.createTodo(value);
       this.set('value', '');
      }
    }
    
  
 // 2
   //  submit:    function(event) {
   //  event.preventDefault();  this.get('controller').createTodo(this.get('textField.value'));
          
  //    console.log(this.set('textField.value', ''));
 //   }

       
});



//Todos.initialize();