Backbone View Basics

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage-min.js"></script>

CSS

.color-box {
    width: 100px;
    height: 100px;
    background: #F0ccf0;
}

JavaScript

var BoxView = Backbone.View.extend({
    tagName: 'div',
    className: 'color-box',
    render: function() {
        this.$el.html('Hello World!');
        this.$el.hide();
        return this;
    }
});

var BodyView = Backbone.View.extend({
    el: 'body'
});

var body = new BodyView();
var box = new BoxView();
body.$el.append(box.el);
box.render();
box.$el.show('slow');