Backbone render placement - backbone.js

Question

Just wondering why this works:
window.NewListView = Backbone.View.extend({
template: _.template('Create New List'),
render: function(){
$(this.el).html(this.template());
return this;
}
});
window.List = new (Backbone.Router.extend({
routes: { "": "index" },
initialize: function(){
this.newListView = new NewListView();
},
start: function(){
Backbone.history.start();
},
index: function(){
$('.lists').append(this.newListView.render().el);
}
}));
$(function(){ List.start(); })
And this doesn't:
window.NewListView = Backbone.View.extend({
template: _.template('Create New List'),
render: function(){
$(this.el).html(this.template());
return this;
}
});
window.List = new (Backbone.Router.extend({
routes: { "": "index" },
initialize: function(){
this.newListView = new NewListView();
$('.lists').append(this.newListView.render().el);
},
start: function(){
Backbone.history.start();
},
index: function(){
}
}));
$(function(){ List.start(); })
The difference is just moving
$('.lists').append(this.newListView.render().el);
between initialize() and index() of the router.

Answer 1

Its because of the way, and when, you're creating an instance of your router.
When you do:
window.List = new (Backbone.Router.extend({...
You're creating an instance of the router before the DOM is loaded. Therefore, in your initialize function, your jQuery selector is not returning any nodes.
If you open up a console, you can see the order of operations logged to it on this jsFiddle:
http://jsfiddle.net/edwardmsmith/x64hw/
window.NewListView = Backbone.View.extend({
template: _.template('Create New List'),
render: function(){
$(this.el).html(this.template());
return this;
}
});
window.List = new (Backbone.Router.extend({
routes: { "": "index" },
initialize: function(){
this.newListView = new NewListView();
console.log("List Initialize");
$('.lists').append(this.newListView.render().el);
},
start: function(){
Backbone.history.start();
},
index: function(){
}
}));
$(function(){
console.log("Before List Start");
List.start();
console.log("After List Start");
})​
Results in:
List Initialize
Before List Start
After List Start
But, if you create your router instance after the DOM loads:
window.NewListView = Backbone.View.extend({
template: _.template('Create New List'),
render: function(){
$(this.el).html(this.template());
return this;
}
});
window.List = Backbone.Router.extend({
routes: { "": "index" },
initialize: function(){
this.newListView = new NewListView();
console.log("List Initialize");
$('.lists').append(this.newListView.render().el);
},
start: function(){
Backbone.history.start();
},
index: function(){
}
});
$(function(){
console.log("Before List Start");
list = new List();
list.start();
console.log("After List Start");
})​
The order is as you would expect, and it works:
Before List Start
List Initialize
After List Start
as shown in this jsFiddle:
http://jsfiddle.net/edwardmsmith/eDWfh/