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">
    <div>Unwrapped:</div>
    {{render "check"  App.test}}
    <div>Wrapped:</div>
    <div {{action "something"}}>
        {{render "check" App.test}}
    </div>
    <div>Wrapped (extended Checkbox):</div>
    <div {{action "something"}}>
        {{render "checkExtended" App.test}}
    </div>
    <div>App.value: {{App.test.value}}</div>
</script>

<script type="text/x-handlebars" data-template-name="check">
    <label>Value:</label>
    {{view "Em.Checkbox" checkedBinding="content.value"}}
</script>

<script type="text/x-handlebars" data-template-name="checkExtended">
    <label>Value:</label>
    {{view App.ExtendedCheckbox checkedBinding="content.value"}}
</script>

CSS

input {
    margin-bottom: 20px;
}

JavaScript

App = Em.Application.create();

App.ApplicationController = Em.ObjectController.extend({
    something: function() {
        console.log('do something');
    }
});

App.ExtendedCheckbox = Em.Checkbox.extend({
    click: function(event) {
        event.stopPropagation();
        this.$().parent().click();
    }
});

App.test = new Em.Object();
App.test.set('value', true);

$(document).on('click', function(event) {
    console.log('document clicked with target "' + event.target.tagName + '"');
});