javascript - Type of sort in Backbone JS (on the fly) -


i'm trying sort table of users when click on th. users have :

  • a first name
  • a last name
  • an age
  • an id

when click on th, sort happen :

  • when sort users first or last name, works on asc direction.
  • when sort users age, works, both direction

any idea ?

here view :

var userlistview = backbone.view.extend({   el: ".page",   events: {     'click .delete': 'deleteuser',     'click th': 'sortitem',   },   initialize: function(){     this.users = new userscollection();    },    sortitem: function(ev) {     var = 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 = this;           this.users.fetch({       success: function(users) {         var template = _.template(userlisttemplate, {           users: users.models         });         that.$el.html(template);       }     });   } }); 

and collection :

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

you have 2 problems:

  1. you can't reverse sort order of strings negating them.
  2. your sort direction flips every time sort_field called when you're changing field, presumably changing field should reset direction ascending.

first things first. if switch 2 argument comparator can fix (1) comparing things < , > rather trying use negation reverse order trick:

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

there lots of ways write logic there variations on above theme.

you can fix (2) checking if field changing, if reset sort direction, if isn't flip direction:

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

demo: http://jsfiddle.net/ambiguous/br4kj/

separating sort field , sort direction @ view level might make more sense though, have separate field (collection.sort_field(field)) , direction (collection.sort_dir(dir)) calls; calling sort_field would, of course, reset direction ascending , sort_dir leave sort field alone.


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -