Backbone.js Introduction to Views

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script id="view1" type="text/html">
    <div>
        <h2>Introducing Backbone View #1</h2>
        <em>This view is targeting an existing DOM element</em>
    </div>
</script>
<script id="view2" type="text/html">
    <div>
        <h2>Introducing Backbone View #2</h2>
        <p>
            <em>This DOM for this view is created by Backbone and appended to the DOM upon render.</em>
        </p>
        <a href="" class="clickable">Some Link....</a>
    </div>
</script>

<div id="view1"></div>

CSS

.blue-stuff {
    background-color: lightsteelblue;
    color: midnightblue;
    font-family: Arial, sans-serif;
    font-size: 10pt;
}
div {
    margin-bottom: 20px;
    padding: 5px;        
}

JavaScript

var View1 = Backbone.View.extend({
        el: "#view1",
    
        initialize: function() {
            // using the initialize to grab the template
            // text and cache it on the view object
            this.template = $("#view1").text();
        },
    
        render: function() {
            // this.$el provides jQuery object for the view's element
            this.$el.html(this.template);
            // this.$ provides jQuery selector function scoped to the view
            this.$("em").css({ "font-family" : "Verdana", "font-size" : "8pt" });
        }
    }),
    View2 = Backbone.View.extend({
        
        // used to construct the view's DOM element
        tagName: "div",
        
        // class applied to the DOM element
        className: "blue-stuff",
        
        // id applied to the DOM element
        id: "view2",
        
        events: {
            "click .clickable" : "onClick"
        },
        
        initialize: function() {
            // using the initialize to grab the template
            // text and cache it on the view object
            this.template = $("#view2").text();
        },
    
        render: function() {
            // this.$el provides jQuery object for the view's element
            this.$el.html(this.template).appendTo('body');
        },
        
        // handler wired up via the events hash
        onClick: function( e ) {
            e.preventDefault();
            this.$("a").after("<p>aaaand you clicked the link</p>");    
        }
    }),
    view1,
    view2;

view1 = new View1();
view1.render();

view2 = new View2();
view2.render();