0

当我单击 th 时，我正在尝试对我的用户表进行排序。我的用户有：

  • 名字
  • 姓氏
  • 年龄
  • 身份证

当我单击 th 时，会发生一种排序，但是：

  • 当我按名字或姓氏对用户进行排序时，它仅适用于 asc 方向。
  • 当我按年龄对用户进行排序时，双向有效

任何的想法 ？

这是我的观点：

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

你有两个问题：

  1. 您不能通过否定字符串来反转字符串的排序顺序。
  2. sort_field即使您更改字段，每次都会调用您的排序方向翻转，大概更改字段应该将方向重置为升序。

第一件事。如果您切换到两个参数，那么您可以通过将事物与而不是尝试使用否定来反转顺序技巧comparator来轻松修复（1） ：<>

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 回答