Ember Starter Kit

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
      {{my-checkbox}}
  </script>

<script type="text/x-handlebars" data-template-name="components/my-checkbox">
    <div {{action 'containerClicked'}} style="background-color:#cccccc;">
        {{input type="checkbox" checked=isSelected}} {{isSelected}}
    </div>
</script>

CSS

/* Put your CSS here */
 html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function () {
    // put your routes here
});

App.IndexRoute = Ember.Route.extend({
    model: function () {
        return ['red', 'yellow', 'blue'];
    }
});

App.MyCheckboxComponent = Ember.Component.extend({
    
    isSelected: false,
    
    actions: {
        containerClicked: function(e) {
            alert('container clicked');
        }
    }
    
});