Backbone.js `el` and `events` not binding properly - backbone.js

Question

For some reason, while previously working just fine, have el and events bindings now stopped working properly.
I have had:
User.HeaderView = Backbone.View.extend({
el: '#header',
template: _.template($('#header-template').html()),
events: {
"click .login": "login"
},
initialize: function(parentView) {
this.parentView = parentView;
},
render: function() {
this.parentView.render();
this.el.innerHTML = this.template(/* pass model */);
}
});
Previously this worked just fine, but for some reason, el no longer correctly binds to #header in DOM. Instead, it is instantiated with empty div, which can be easily confirmed: if I debug el with Firebug (console.log(this.$el.parent().html()) I get:
null
What I'm expecting to get is something like:
<div id="header"><ul></ul></div>
This is the method I currently use to initialize the views:
view.headerView = new HeaderView(parentView);
Any ideas how I could fix this or debug further?

Answer 1

initialize expects an object containing the options you wish to pass to your view. Here you pass a view, which is an object and probably has an el attribute already set, overwriting the one you declare in HeaderView. Try
User.HeaderView = Backbone.View.extend({
el: '#header',
template: _.template($('#header-template').html()),
events: {
"click .login": "login"
},
initialize: function(options) {
this.parentView = options.parentView;
},
render: function() {
this.parentView.render();
this.el.innerHTML = this.template(/* pass model */);
}
});
new HeaderView({parentView:parentView});