Backbonejs add to collection only if fetch data different - json

Question

I am writing a small app that calls a json request that has data about a track that is playing for a music player. Every 2-3 minutes that track on the json request changes. I am trying to get backbone to only fire and add another model to my collection if the previous entry called is different. Here is my code so far, however it keeps rendering the same data
// Model: Track
//
//
window.Track = Backbone.Model.extend({});
// Collection: Tracks
//
//
window.Tracks = Backbone.Collection.extend({
model: Track,
url: "api/nowplaying/1.json",
parse: function (response) {
return response.response.body;
}
});
// View: MetaDataView
//
//
window.MetaDataView = Backbone.View.extend({
template: "#metadata-template",
tagName: 'li',
className: 'metadata',
initialize: function() {
_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.initializeTemplate();
},
initializeTemplate: function() {
this.template = _.template($(this.template).html());
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
// View: MetaDataLibraryView
//
//
window.MetaDataLibraryView = Backbone.View.extend({
tagName: 'section',
className: 'metadata-library',
initialize: function() {
_.bindAll(this, 'render', 'startup', 'renderNew');
this.template = _.template($('#metadata-library-template').html());
//this.collection.bind('reset', this.render);
this.collection.on('add', this.renderNew, this);
this.startup();
},
startup: function() {
var e = this;
window.setInterval(function () {
console.log('fetching');
e.collection.fetch({update: true, remove:false, add: true});
}, 2000);
},
renderNew: function(newModel) {
var collection = this.collection;
$metadata = this.$(".metadata-library");
var view = new MetaDataView({ model: newModel, collection: collection });
$metadata.append(view.render().el);
return this;
},
render: function() {
var $metadata,
collection = this.collection;
$(this.el).html(this.template({}));
$metadata = this.$(".metadata-library");
this.collection.each(function(schedule) {
var view = new MetaDataView({ model: schedule,
collection: collection });
$metadata.append(view.render().el);
});
return this;
}
});
I have found posts on stackoverflow talking about the possibility of using collection fetch options like {update: true, remove:false, add: true}. How would I get the data to be rendered only if the model changes that's being fetch?

Answer 1

Something like this should work
startup: function() {
window.setInterval(function () {
console.log('fetching');
var track = new Track();
track.fetch()
.done(function() {
if(!this.isSamePrevTrack(track)) {
e.collection.add(track);
}
}.bind(this));
}.bind(this), 2000);
},
isSamePrevTrack: function(track) {
if(!this.prevTrack) {
this.prevTrack = track;
return false;
}
// Do some test to see if the track is the same
// ie. return this.prevTrack.get('id') === track.get('id');
});