Hi I have a Collection which uses fetch()
to do the initial fetch from the API. On a user's interaction, a second fetch is triggered, but instead of using the original fetch()
, I used a fetchNew()
that I defined myself:
Collection
ListingCollection = Backbone.Collection.extend({
model: Listing,
url: '/api/search_by_bounds',
fetchNew: function(options) {
options = options || {};
var collection = this,
success = options.success;
options.success = function(resp, status, xhr) {
_(collection.parse(resp, xhr)).each(function(item) {
// added this conditional block
if (!collection.get(item.id)) {
// Update collection
collection.add(item, {silent:true});
// Render View
new ListingMarkerView({ model:item }).render();
}
});
if (!options.silent) {
collection.trigger('reset', collection, options);
}
if (success) success(collection, resp);
};
return (this.sync || Backbone.sync).call(this, 'read', this, options);
}
});
This will add only the new Models to the collection, and render only the Views of these new Models. (if all the Views are removed and re-rendered, it will cause a flicker)
View
ListingMarkerView = Backbone.View.extend({
render: function() {
var marker = L.marker([this.model.get('lat'), this.model.get('lng')]);
markers.addLayer(marker);
},
close: function() {
this.unbind;
}
});
Error
However I am getting an error:
Uncaught TypeError: Object #<Object> has no method 'get'
which corresponds to this line in ListingMarkerView
var marker = L.marker([this.model.get('lat'), this.model.get('lng')]);
Debug
If I were to place a console.log(item)
before the line that renders ListingMarkerView
console.log(item)
new ListingMarkerView({ model:item }).render();
I do see a valid item
:
Object
id: "2599084"
lat: "42.276852"
lng: "-71.165421"
price: "2850"
__proto__: Object
So...
Question
What seems to be the problem? How can this be solved? Thank you!