javascript - The sort-button doesn not work in Backbone.js -

i have json file, need parse collection , render html pageand need add button, sort collection , redraw on page. code, made:

that's part model, collection , sorting:

           var profile = backbone.model.extend();              var profilelist = backbone.collection.extend({                 model: profile,                 url: 'profiles.json',                 selectedstrategy: "count",                   comparator: function (property){                     return selectedstrategy.apply(model.get(property));                 },                  strategies: {                     count: function (model) {return model.get("count");},                     name: function (model) {return model.get("name");}                  },                  changesort: function (sortproperty) {                     this.comparator = this.strategies[sortproperty];                 },                   initialize: function () {                     this.changesort("count");                  },                });   

it's view , button:

            var profileview = backbone.view.extend({                 el: "body",                 template: _.template($('#profiletemplate').html()),                 sort: null,                   initialize: function() {                     this.sort = new resortview();                     this.bind('all', this.render());                 },                  render: function() {                     _.each(this.model.models, function(profile){                         var profiletemplate = this.template(profile.tojson());                         $(this.el).append(profiletemplate);                     }, this);                      return this;                 },                  resort: function (){                     console.log("111");                     this.model.changesort("name");                 },                  events: {                     "click .sort": "resort",                     //"click.nsort": "nsort"                 },              });              var resortview = backbone.view.extend({                 el: $("#sort")             });              var appview = backbone.view.extend({                 el: "body",                 initialize: function() {                      var profiles = new profilelist();                         var profilesview = new profileview({                         model: profiles                     });                       profiles.bind('all', function () {                         profilesview.render();                     });                      profiles.fetch({success: function (model,resp) { console.log(resp);}});                   }             });              var app = new appview();          }); 

the question why when run it, seems ok, sorting does't work, , firebug saying nothing , button writing consol.

p.s. i'm new in web developing , in js\backbone.js

just changing comparator:

changesort: function (sortproperty) {     this.comparator = this.strategies[sortproperty]; } 

won't re-sort collection, collection has no way of know comparator has changed unless tell it. need force issue calling sort:

changesort: function (sortproperty) {     this.comparator = this.strategies[sortproperty];     this.sort(); } 

---

and few other things while i'm here:

1. your initial comparator:

   comparator: function (property){     return selectedstrategy.apply(model.get(property)); } 

   is invalid (unless have global selectedstrategy defined somewhere), should leave out , let initialize set calling changesort.

2. this.bind('all', this.render()); nothing useful, bind wants function second argument this.render() calls render method. don't want this.bind call there @ , if do, you'd want this.bind('all', this.render).

3. views handle collection option how handle model option in their constructor:

   there several special options that, if passed, attached directly view: model, collection, el, id, classname, tagname , attributes.

   so, if view collection-based, you'd want new view({ collection: ... }) , use this.collection instead of this.model avoid confusion.

4. collections have various underscore functions built-in don't say:

   _.each(this.model.models, ... 

   when can instead:

   this.collection.each(... 

5. view's have jquery wrapped version of el built in can use this.$el instead of $(this.el) (which rebuilds jquery wrapper each time call it).