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:
- you can't reverse sort order of strings negating them.
- 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
Post a Comment