0

目をクリックすると、ユーザーのテーブルを並べ替えようとしています。私のユーザーは：

  • 名
  • 姓
  • 年齢
  • ID

目をクリックすると、並べ替えが発生しますが：

  • ユーザーを名または姓で並べ替えると、昇順でのみ機能します。
  • ユーザーを年齢で並べ替えると、双方向に機能します

何か案が ？

これが私の見解です：

var UserListView = Backbone.View.extend({
  el: ".page",
  events: {
    'click .delete': 'deleteUser',
    'click th': 'sortItem',
  },
  initialize: function(){
    this.users = new UsersCollection();

  },

  sortItem: function(ev) {
    var that = this;  
    var field = ev.currentTarget.id;
    this.users.sort_field(field);
    this.render();
  },

  deleteUser: function(ev) {
    var id = ev.currentTarget.dataset.userId;
    var user = new UserModel({
      id: id
    });
    user.destroy({
      success: function() {
        var userList = new UserListView();
        userList.render();
      }
    })
  },

  render: function() {
    var that = this;      
    this.users.fetch({
      success: function(users) {
        var template = _.template(UserListTemplate, {
          users: users.models
        });
        that.$el.html(template);
      }
    });
  }
});

そして私のコレクション：

var UsersCollection = Backbone.Collection.extend({
  model: UserModel,
  url: "/users",
  initialize: function() {
    this._compar = 'id';
    this._sortDir = 'asc';
  },
  comparator: function(user) {
    console.log(this._sortDir);
    return this._sortDir == 'asc' ? user.get(this._compar) : -user.get(this._compar);
  },

  sort_field: function(field) {
    this._compar = field;
    this._sortDir = this._sortDir == 'asc' ? 'desc' : 'asc';
    this.sort();
  }

});
4

1 に答える 1

1

2 つの問題があります。

  1. 文字列を否定しても、文字列の並べ替え順序を逆にすることはできません。
  2. フィールドを変更している場合でも、呼び出されるたびにソート方向が反転sort_fieldします。おそらくフィールドを変更すると、方向が昇順にリセットされるはずです。

まず最初に。2 つの引数に切り替えると、否定を使用して順序を逆にするのではなく、and と比較することで(1)comparatorを簡単に修正できます。<>

comparator: function(a, b) {
    a = a.get(this._compar);
    b = b.get(this._compar);
    var els = this._sortDir == 'asc' ? [ a, b ] : [ b, a ];
    return els[0]  > els[1] ?  1
         : els[0]  < els[1] ? -1
         :                     0;
}

そのロジックを記述する方法はたくさんありますが、上記のテーマにはすべてバリエーションがあります。

(2)は、変更されているかどうかを確認するだけで修正できますfield。変更されている場合は並べ替え方向をリセットし、変更されていない場合は方向を反転します。

sort_field: function(field) {
    if(this._compar == field) {
        this._sortDir = this._sortDir == 'asc' ? 'desc' : 'asc';
    }
    else {
        this._compar  = field;
        this._sortDir = 'asc';
    }
    this.sort();
}

デモ: http://jsfiddle.net/ambiguous/Br4Kj/

ビュー レベルで並べ替えフィールドと並べ替え方向を分離する方が理にかなっている場合がありcollection.sort_field(field)ますcollection.sort_dir(dir)。もちろん、呼び出しsort_fieldは方向を昇順にリセットしsort_dir、並べ替えフィールドをそのままにします。

于 2013-04-05T19:29:37.283 に答える