javascript - How to sort items in backbone.js -

i working on learn backbone.js, decided make mi own todo app using backbone.js , localstorage plugin. have todo app in wich can add , remove todos, working on make them sortable in done , not done tasks. problem can't find way it. created method in view called sort_done()

    sort_done: function(){     var done = this.collection.where({done: true});     console.log(done); } 

but don't know how udate view in order show thedone or not done tasks, appreciate if give me advice in how can manage kind of ´problem. leave model, collection , views js can take look.

model:

    var task = backbone.model.extend({     defaults:{         title: "an empyt task..",         done: false     },      validate: function(attrs){         if(! $.trim(attrs.title)){             return "the task has no title"         }     } });  var task = new task; 

collection:

var tasks = backbone.collection.extend({ model: task,  localstorage: new backbone.localstorage("todos-collection") });  var tasks = new tasks(); 

views:

   var taskview = backbone.view.extend({     tagname: "li",      template: _.template( $('#task').html() ),      initialize: function(){         this.model.on('change', this.render, this);         this.model.on('destroy', this.remove, this);     },      render: function(){         var template = this.template( this.model.tojson() );          this.$el.html( template );          return this;     },      events: {         'click .icon-checkbox': 'togglestate',         'click .task_title': 'edittask',         'keypress .edit': 'updateonenter',         'click  .close_btn': 'clear'     },      togglestate: function(e){         var $checkbox = $(e.target);         this.model.save('done', !this.model.get('done'));      },      edittask: function(e){         this.task = $(e.target);         this.editbox = this.task.next();         this.editinput = this.editbox.find('.edit');          $(".task_title").removeclass("display__none");         $(".editbox").removeclass("edit_box__editing");         this.task.addclass("display__none")         this.editbox.addclass("edit_box__editing");         this.editinput.attr('placeholder', this.task.text()).focus();     },      updateonenter: function(e){         if(e.keycode === 13){             this.close();         }     },      close: function(){         var value = this.editinput.val();         if(!value){             this.task.removeclass("display__none")             this.editbox.removeclass("edit_box__editing");         }else{             this.model.save({title: value});             this.task.removeclass("display__none")             this.editbox.removeclass("edit_box__editing");         }     },      clear:function(){         this.model.destroy();     } });  var tasksview = backbone.view.extend({     el: '#tasks',      initialize: function(){         this.render();         this.collection.on('add', this.addone, this);         this.collection.on()     },      render: function(){         this.collection.each(this.addone, this);          return this;      },      addone: function(task){         var taskview = new taskview({ model: task });         this.$el.append( taskview.render().el );     } });  var addtask = backbone.view.extend({     el: '#todos',      initialize: function(){         this.collection.fetch();     },      events:{         'click #add': 'addtask',         'click #filter_done': 'sort_done',         'keypress #inputtask': 'updateonenter'     },      addtask: function(){          var tasktitle = $('#inputtask'). val();         $('#inputtask').val(""); //clear input          if($.trim(tasktitle) === ''){//check if input has text in             this.displaymessage("todo's can not empty");         }else{             var task = new task( {title: tasktitle} ); // create task model             this.collection.create(task); //add model collection                  }     },      displaymessage: function(msg){         $('#inputtask').focus().attr("placeholder", msg);     },      updateonenter: function(e){         if(e.keycode === 13){             this.addtask();         }     },      sort_done: function(){         var done = this.collection.where({done: true});         console.log(done);     }  });   var tasksview = new tasksview( {collection: tasks} ); var addtask = new addtask( {collection: tasks} ); 

thank yoou much!

when call collection.where collection not filtered, returning filtered models (not changing initial collection), problem have :

initialize: function(){     this.render();     this.collection.on('add', this.addone, this);     this.collection.on('reset', this.render, this); // here change event reset },  ...  sort_done: function(){     var done = this.collection.where({done: true});     this.collection.reset(done);     console.log(done); }