I have a simple backbone.js twitter application that needs to sort tweets in reverse order. I've currently implemented a parator sort by date. When the "Reverse" button is clicked (as seen in the View) how do I reverse sort all the tweets without going back through the parator? My impression is that when I call sort it will attempt to re-render the list (which means the parator will sort the data again, which is undesirable). How do I override this?
Tweet = Backbone.Model.extend();
// Define the collection
Tweets = Backbone.Collection.extend(
{
model: Tweet,
// Url to request when fetch() is called
url: '.json?q=codinghorror',
parse: function(response) {
//modify dates to be more readable
$.each(response.results, function(i,val) {
val.created_at = val.created_at.slice(0, val.created_at.length - 6);
});
return response.results;
},
// Overwrite the sync method to pass over the Same Origin Policy
sync: function(method, model, options) {
var that = this;
var params = _.extend({
type: 'GET',
dataType: 'jsonp',
url: that.url,
processData: true
}, options);
return $.ajax(params);
},
parator: function(activity){
var date = new Date(activity.get('created_at'));
return -date.getTime();
}
});
// Define the View
TweetsView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render');
// create a collection
this.collection = new Tweets;
// Fetch the collection and call render() method
var that = this;
this.collection.fetch({
success: function (s) {
console.log("fetched", s);
that.render();
}
});
},
el: $('#tweetContainer'),
// Use an external template
template: _.template($('#tweettemplate').html()),
render: function() {
// Fill the html with the template and the collection
$(this.el).html(this.template({ tweets: this.collection.toJSON() }));
},
events : {
'click .refresh' : 'refresh',
**'click .reverse' : 'reverse'**
},
refresh : function() {
this.collection.fetch();
console.log('refresh', this.collection);
this.render();
},
**reverse : function() {**
console.log("you clicked reverse");
console.log(this.collection, "collection");
this.collection.sort();
//How do I reverse the list without going through the parator?
**}**
});
var app = new TweetsView();
});
I have a simple backbone.js twitter application that needs to sort tweets in reverse order. I've currently implemented a parator sort by date. When the "Reverse" button is clicked (as seen in the View) how do I reverse sort all the tweets without going back through the parator? My impression is that when I call sort it will attempt to re-render the list (which means the parator will sort the data again, which is undesirable). How do I override this?
Tweet = Backbone.Model.extend();
// Define the collection
Tweets = Backbone.Collection.extend(
{
model: Tweet,
// Url to request when fetch() is called
url: 'http://search.twitter./search.json?q=codinghorror',
parse: function(response) {
//modify dates to be more readable
$.each(response.results, function(i,val) {
val.created_at = val.created_at.slice(0, val.created_at.length - 6);
});
return response.results;
},
// Overwrite the sync method to pass over the Same Origin Policy
sync: function(method, model, options) {
var that = this;
var params = _.extend({
type: 'GET',
dataType: 'jsonp',
url: that.url,
processData: true
}, options);
return $.ajax(params);
},
parator: function(activity){
var date = new Date(activity.get('created_at'));
return -date.getTime();
}
});
// Define the View
TweetsView = Backbone.View.extend({
initialize: function() {
_.bindAll(this, 'render');
// create a collection
this.collection = new Tweets;
// Fetch the collection and call render() method
var that = this;
this.collection.fetch({
success: function (s) {
console.log("fetched", s);
that.render();
}
});
},
el: $('#tweetContainer'),
// Use an external template
template: _.template($('#tweettemplate').html()),
render: function() {
// Fill the html with the template and the collection
$(this.el).html(this.template({ tweets: this.collection.toJSON() }));
},
events : {
'click .refresh' : 'refresh',
**'click .reverse' : 'reverse'**
},
refresh : function() {
this.collection.fetch();
console.log('refresh', this.collection);
this.render();
},
**reverse : function() {**
console.log("you clicked reverse");
console.log(this.collection, "collection");
this.collection.sort();
//How do I reverse the list without going through the parator?
**}**
});
var app = new TweetsView();
});
- I created a solution here that works for both numbers and strings maybe it works with dates? It works with times! stackoverflow./questions/5013819/… – Fasani Commented Jan 29, 2014 at 15:02
1 Answer
Reset to default 8The usual solution to Backbone problems is to use events. Calling sort will trigger a "reset" event:
Calling sort triggers the collection's
"reset"event, unless silenced by passing{silent: true}.
So you could have a "sort order" flag in your collection:
Backbone.Collection.extend({
//...
initialize: function() {
//...
this.sort_order = 'desc';
//...
}
});
and then your parator can pay attention to that flag:
parator: function(activity) {
var date = new Date(activity.get('created_at'));
return this.sort_order == 'desc'
? -date.getTime()
: date.getTime()
}
and you could have a method on the collection to change the sort order:
reverse: function() {
this.sort_order = this.sort_order = 'desc' ? 'asc' : 'desc';
this.sort();
}
Then your view can listen for the "reset" event and redisplay the collection when you change the sort order. Once all that's in place, you just tell your your reverse button to call view.collection.reverse() and everything will be fine.
Demo: http://jsfiddle/ambiguous/SJDKy/