JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="emails">
    <ul>
        {{#each itemController="email"}}
            {{view App.EmailView}}
        {{/each}}   
    </ul>
    <button {{action "checkAllEmails"}}>Check All</button>
</script>

<script type="text/x-handlebars" data-template-name="email">                 
    {{id}} - {{text}}  
    {{input type="checkbox" checked=isChecked}}
</script>

JavaScript

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('emails');
  }
});

App.Router.map(function() {
  this.resource('emails');
});

App.EmailsRoute = Ember.Route.extend({
  model: function(){
      return [
          {id: 1, text: 'Email1'},
          {id: 2, text: 'Email2'},
          {id: 3, text: 'Email3'}
      ];
  }   
});

App.EmailsController = Ember.ArrayController.extend({
    checkAll: false,
    actions: {
  		checkAllEmails: function() {
            this.toggleProperty("checkAll");
            console.log(this.get("checkAll"));
  		} 
  	}
});

App.EmailController = Ember.ObjectController.extend({
  needs: ["emails"],
  isChecked: false,
  checkAllChanged: function() {
      console.log("checkAllChanged");
      this.set("isChecked",this.get('controllers.emails.checkAll'));
  }.observes("controllers.emails.checkAll")
});

App.EmailView = Ember.View.extend({
	templateName: 'email',
	tagName: 'li'
});