headerView = Backbone.View.extend({ el: $('#' + targetdiv), collection: orderedPrefs, events: { "click .scheduleheader": "clicked" // dependency here on scheduler.js class naming .scheduleheader }, initialize: function () { _.bindAll(this, "render"); }, render: function () { alert('render!!'); }, this.collection.on("add", this.render); this.collection.on("remove", this.render); this.collection.on("reset", this.render); new headerView({ collection: orderedPrefs }); var ModelView = Backbone.View.extend({ initialize: function() { _.bindAll(this, "render"); this.render(); this.model.on("change",this.render); }, render: function() { $(this.el).html("model view markup"); // you should use templating return this; } }); var headerView = Backbone.View.extend({ el: $('#' + targetdiv), initialize: function () { _.bindAll(this, "render"); this.collection.on("add", this.render); this.collection.on("remove", this.render); this.collection.on("reset", this.render); }, render: function () { var self = this; this.collection.each(function(collectionModel){ var view = new ModelView({ model : collectionModel }); $(self.el).append(view.el); }); } }); this.collection.on("add", this.render); this.collection.on("add remove", this.render);