javascript - Overriding Backbone.js comparator - Stack Overflow

admin管理员组

文章数量:1336632

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();
 });

• javascript
• backbone.js
• underscore.js

Share Improve this question Follow asked May 2, 2012 at 20:15 The InternetThe Internet 8,1231212 gold badges5858 silver badges9292 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The 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/

本文标签： javascriptOverriding Backbonejs comparatorStack Overflow