mass-write using a backbone collection - backbone.js

Question

Using backbone.js, say I had a collection -- Albums
var albums_collection = new Backbone.Collection([
{artist:"dell the funky homosapien"},
{artist:"raffe"},
{artist:"wilson philips"},
{artist:"eddie murply"},
{artist:"jordotech"}
]);
And corresponding view
AlbumView = Backbone.View.extend({
render: function(){
$(this.el).html(this.model.get('artist') + "<br />");
return this;
}
});
Let's say, instead of just these 4 albums, I had 10k albums and I wanted to render them all. Most backbone tutorials would say you should loop through the collection and append to the dom one by one.
album_colleciton.each(addOne);
addOne:function(model){
var view = new AlbumView({model:model});
$("#albums_container").append(view.render().el):
}
However, it's come to my attention that writing to the DOM one by one like this might actually slow down performance... Is there some way to save each one of these to perhaps an array and mass update all at once? I've tried:
var arr = [];
_.each(this.collection.models, function(model){
var view = new AlbumView({model:model});
arr.push(view.render().el);
});
$("#albumbs_view").html(arr.join(''));
But the above results in a series of "HTMLdivElement"'s being rendered. Any idea how to do just one single instead of 1000 in this case?

Answer 1

make sure your view does NOT specify an "el". allow that to be create by backbone. then your render function can populate the view's el all day long without it manipulating the DOM. finally, when you're done, attach it to the DOM.
CollectionView = Backbone.View.extend({
render: function(){
var that = this;
this.collection.each(function(m){
var v = new SomeView({model: m});
v.render();
that.$el.append(v.$el);
});
}
});
cv = new CollectionView({collection: someCollection});
cv.render();
$("#whatever").html(cv.$el);
By the way, my Backbone.Marionette framework will make this even easier for you:
SomeView = Marionette.ItemView.extend({
// ...
});
AllTheViews = Marionette.CollectionView.extend({
itemView: SomeView
});
atv = new AllTheViews({collection: someCollection});
atv.render();
$("#whatever").html(atv.$el);
And then there's Regions which make stuffing the view in to the DOM even easier... A good place to start if you're interested in Marionette is Addy Osmani's Backbone Fundamentals book, and the chapter on Marionette.