I'm convinced this is a very easy fix, but none of the posts I've found so far seem to have addressed this directly: how do I loop over a collection to get each model?
The first method I'm trying to use is underscore's each method. Here is my call and function:
collection_var.each(paintThings);
and here is my function:
function paintThings() {
console.log(this);
console.log(this.model);
var thing_type = this.model.get("type"),
thing_other = this.model.get("otherAttribute");
console.log(this.model);
console.log(thing_type);
console.log(thing_other);
}
Right now, this comes out as undefined, and this.model errors:
Uncaught TypeError: Cannot read property 'model' of undefined
I know the answer is simple, but it's driving me crazy! I'm new to underscore. Can anyone here help? I'm also open to other non-underscore methods if they are faster/better.
I also tried this:
for (var i = 0, l = collection_var.length; i < l; i++) {
console.log(collection_var[i]);
}
but that's not giving me what I want either.
5 Answers
First method: use the models property of your collection:
var myModel
for(var i=0; i<myCollection.length; i++) {
myModel = myCollection.models[i];
}
Second method is with the each method:
myCollection.each(function(model, index, [context]) {...});
Iterating over every model of a collection eg. as give by backbone.js is
books.each(function(book) {
book.publish();
});
In your case it should be something like this
collection_var.each(function(paintThing){
console.log(paintThing);
var thing_type = this.model.get("type"),
thing_other = this.model.get("otherAttribute");
console.log(paintThing);
console.log(thing_type);
console.log(thing_other);
});
I think you should try collection_var.models.each(paintThings). That should give you direct access to the models of a collection.
Okay, stupid error! I just had to pass an extra parameter to the function so I can touch the model.
Like this:
function paintThings(thing) {
//returns model
console.log(thing);
var thing_type = thing.get("type"),
thing_other = thing.get("otherAttribute");
//These all respond directly
console.log(thing);
console.log(thing_type);
console.log(thing_other);
}
I'm still going to review all answers and accept the most elegant solution!
I used underscores map.
docs = Backbone.Collection.extend();
this.subViews = _.map(docs.models, function(doc) {
return new DocView({ model: doc });
}, this);
