Backbone inheritance

by Gregor Z.

HTML

<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<div id='content'>
    <button class='button1'>Button1</button>
    <button class='button2'>Button2</button>
    <button class='button3'>Button3</button>
    <button class='button4'>Button4</button>
    <div class='message'>
    </div>
</div>

JavaScript

var View1 = Backbone.View.extend({
    el : "#content",
    events : {
        "click .button1" : "func1"
    },
    func1 : function() {
        this.$(".message").append("<p>I'm View1</p>");
    }
});

var View2 = View1.extend({
    events : function() {
        return _.extend({},View1.prototype.events,{
            "click .button2" : "func2"
        });
    },
    func2 : function() {
        this.$(".message").append("I'm View2");
    }
});

var View3 = View2.extend({
    events : function() {
        return _.extend({},View2.prototype.events.call(this),{
            "click .button3" : "func3"
        });
    },
    func3 : function() {
        this.$(".message").append("<p>I'm View3</p>");
    }
});

var View4 = View3.extend({
    events : function() {
        return _.extend({},_.result(View3.prototype,'events'),{
            "click .button4" : "func4"
        });
    },
    func4 : function() {
        this.$(".message").append("<p>I'm View4</p>");
    }
});

v = new View4();