覆蓋Backbone.js比較器

我有一個簡單的backbone.js twitter應用程序，需要按相反的順序對推文進行排序。我目前使用日期實現了比較器排序。當點擊「反向」按鈕時（如視圖中所示），如何反向排序所有推文而無需返回比較器？我的印象是，當我調用排序時，它會嘗試重新呈現列表（這意味着比較器會再次對數據進行排序，這是不可取的）。我如何覆蓋這個？覆蓋Backbone.js比較器

Tweet = Backbone.Model.extend(); 

// Define the collection 
Tweets = Backbone.Collection.extend(
{ 
    model: Tweet, 
    // Url to request when fetch() is called 
    url: 'http://search.twitter.com/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); 
    }, 
    comparator: 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 comparator? 

**}** 

}); 

var app = new TweetsView(); 
});

來源

2012-05-02 The Internet

我在這裏創造一個解決方案，兩個數字和字符串，也許它的工作原理與工程日期？它適用於時代！ http://stackoverflow.com/questions/5013819/reverse-sort-order-with-backbone-js/#21434708 – Fasani

Backbone問題的通常解決方案是使用事件。調用sort將觸發一個"reset"事件：

調用排序觸發採集的"reset"事件，除非經過{silent: true}沉默。

所以，你可以有一個「排序順序」標誌您的收藏：

Backbone.Collection.extend({ 
    //... 
    initialize: function() { 
     //... 
     this.sort_order = 'desc'; 
     //... 
    } 
});

，然後你comparator可以關注該標誌：

comparator: function(activity) { 
    var date = new Date(activity.get('created_at')); 
    return this.sort_order == 'desc' 
     ? -date.getTime() 
     : date.getTime() 
}

，你可以有一個方法改變排序順序：

reverse: function() { 
    this.sort_order = this.sort_order = 'desc' ? 'asc' : 'desc'; 
    this.sort(); 
}

然後，您的視圖可以偵聽"reset"事件，並在更改排序順序時重新顯示集合。一旦這一切到位，你只要告訴你的反向按鈕撥打view.collection.reverse()，一切都會好起來的。

演示：http://jsfiddle.net/ambiguous/SJDKy/

來源

2012-05-02 20:45:26

覆蓋Backbone.js比較器

回答

相關問題