3

ツイートを逆の順序で並べ替える必要がある単純なbackbone.jsTwitterアプリケーションがあります。私は現在、日付によるコンパレータソートを実装しています。「逆」ボタンがクリックされたとき（ビューに表示されているように）、コンパレータを経由せずにすべてのツイートを逆ソートするにはどうすればよいですか？私の印象では、sortを呼び出すと、リストが再レンダリングされます（つまり、コンパレータがデータを再度ソートしますが、これは望ましくありません）。これをオーバーライドするにはどうすればよいですか？

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

1 に答える 1

8

バックボーンの問題に対する通常の解決策は、イベントを使用することです。呼び出すとイベントsortがトリガーされます。"reset"

sortを呼び出す"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-02T20:45:26.713 に答える