Reputation: 2073
Sorry for the vague title, I'm not sure what's going on enough to formulate it better.
So, this is the render in my view:
render: function () {
var that = this;
var template = JST['gists/index'];
that.$el.html(template);
console.log(['index to render', that.collection]);
_.each(that.collection, function (gist) { // <- I set a breakpoint here
console.log('looping');
that.appendGistDetail(gist);
});
return that;
},
The `console.log(..., that.collection]) is logging this collection correctly:
["index to render", child]
0: "index to render"
1: child
_byId: Object
length: 1
models: Array[1] // <- Note one element. Saving space, but I checked it out and the model is correct
// Worth noting 'looping' is not being logged
However the output from the previously mentioned breakpoint Scope Variable display in Chrome Dev tools:
that: child
$el: jQuery.fn.jQuery.init[1]
childViews: Array[0]
cid: "view2"
collection: child
_byId: Object
length: 0
models: Array[0] // <- Note it's empty, just to test I also set a bp on the line above and it's the same, and when I hovered my mouse over `that.collection` from `console.log` it also said it was empty, but it logs correctly.
So, I'm not really sure what to do, or even what's going on.
Upvotes: 0
Views: 912
Reputation: 434985
So you set a breakpoint here:
_.each(that.collection, function (gist) {
and see that that.collection
is empty but your console.log
:
console.log(['index to render', that.collection]);
suggests that that.collection
has one model. I suspect that you're seeing two confusing behaviors at the same time:
console.log
throws a live reference to its arguments into the console, it doesn't take a snapshot of their current state. So, if something changes between the console.log
call and when you look at the console, you'll see the changed version rather than the one you think you logged.Collection#fetch
is an AJAX call and A stands for Asynchronous.So the sequence of events probably looks like this:
collection.fetch()
which fires off an AJAX call.v = new View({ collection: collection })
and v.render()
.console.log
is hit and a reference to the collection gets stashed in the log.The solution is to bind your rendering to events on the collection and make sure your render
can handle an empty collection in a sensible fashion.
And be careful with using console.log
to help you debug asynchronous things, you'll have to take your own snapshots (console.log(collection.toJSON())
for example) if you want consistent and sensible results.
PS: console.log
is a variadic function, you can give it as many arguments as you want:
console.log('index to render', that.collection);
Also, a collection contains a list of models but it isn't actually the list itself. So doing things like _.each(collection, ...)
won't spin you through the models, it will spine you through a bunch of internal properties that you probably don't care about. You want to iterate over the models:
_.each(collection.models, ....)
or better, use the built-in Underscore methods:
collection.each(...)
Upvotes: 3
Reputation: 14255
Collection extends some underscore methods - each
as well.
that.collection.each(function (gist) {
// ...
});
Code below does the same thing, but I recommend to use the first one.
_.each(that.collection.models, function (gist) {
// ...
});
Upvotes: 0
Reputation: 4269
It looks like you want to loop through each element in the model. Models have an attributes
property that allows you to access the data.
If you're using a backbone model:
_.each(that.collection.attributes, //...
If you're using a backbone collection:
_.each(that.collection.models, //...
Upvotes: 0