JSFiddle - React, Tailwind, and code Playground

by wagenet

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 Ember.TextField id="new-todo" placeholder="what needs to be done" valueBinding="view.value" }}
    {{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"
  disabledBinding="Todos.todoController.isEmpty"
  checkedBinding="Todos.todoController.allAreDone"}}
    Mark All as Done
   
    <br/>
    
    <ul>
{{#each Todos.todoController}}
  <li {{bindAttr class="isDone"}}>
    {{view Ember.Checkbox checkedBinding="isDone"}} {{title}}
  </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,     
  
   submit:  function() {
      var value = this.get('value');
        console.log('submit', value);

     if (value) {
       Todos.todoController.createTodo(value);
       this.set('value', '');
      }
    }
       
});