JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<div id="view-goes-here"></div>

CSS

#view-goes-here {
    padding: 50px;
    border: 1px solid black;
}
#d {
    height: 100px;
    background: #eee;
}

JavaScript

var V = Backbone.View.extend({
    events: {
        'click': 'clicked'
    },
    initialize: function() {
        _.bindAll(this, 'remove');
    },
    render: function() {
        $('body').on('click', this.remove);
        this.$el.html('<div id="d"></div>');
        return this;
    },
    clicked: function() {
        console.log('clicked!');
        return false; // Don't let it through to <body>.
    },
    remove: function() {
        $('body').off('click', this.remove);
        // This is what the default `remove` does.
        this.$el.remove();
        return this;
    }
});

var v = new V;
$('#view-goes-here').append(v.render().el);