Trunk sortBy collection

Question

I create my first base application and get some problems sorting the collection. After using this

var SortedFriends = MyFriends.sortBy(function(friend) { return friend.get("uid"); }); 

console.log (SortedFriends) shows that SortedFriends contains sorted models, but when I try to use collection functions like "SortedFriends.each" or "SortedFriends.at", it makes an error:

TypeError: SortedFriends.each is not a function.

the code:

  var Friend = Backbone.Model.extend({}); var Friends = Backbone.Collection.extend({ model: Friend, }); var MyFriends = new Friends(); MyFriends.reset(<?=$friends?>); var FriendView = Backbone.View.extend({ initialize: function(){ model:Friend }, tagName: "tr", template: _.template($('#item-template').html()), className: "document-row", render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); var SortedFriends = MyFriends.sortBy(function(friend) { return friend.get("uid"); }); var addOne = function(element){ var view = new FriendView({model: element}); $("#friends").append(view.render().el); } console.log(JSON.stringify(SortedFriends)); SortedFriends.each(function(friend){ var view = new FriendView({model: friend}); $("#friends").append(view.render().el); }); 

Answer 1

If you use basic collections, then probably you are better off using comparator methods rather than collection methods

http://backbonejs.org/#Collection-comparator

When you are ready to sort your collection:

 MyFriends.comparator = function(friend){ return friend.get("uid"); }); MyFriends.sort(); 

OR, if you want to keep the order of an unsorted collection, you will first need to clone it

http://backbonejs.org/#Collection-clone

 var SortedFriends = MyFriends.clone(); SortedFriends.comparator = function(friend){ return friend.get("uid"); }); SortedFriends.sort(); 

Answer 2

I'm not sure if this is an error or an adaptation function of Backbone sortBy , but apparently it returns an array, not a collection of Underscore.

One way to wrap everything in _( ... ) , which tells Underscore to return the array to the collection:

 var SortedFriends = _(MyFriends.sortBy(function(friend) { return friend.get("uid"); })); 

Edit

Most of the Underscore methods in Backbone seem to be chain-related (like replacing sortBy with reject , and it works). Looking at the source of the baseline where they connect the underscore proxies, it seems that sortBy handled differently. I can’t understand why they are doing this ...

 var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl', 'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select', 'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke', 'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest', 'tail', 'drop', 'last', 'without', 'indexOf', 'shuffle', 'lastIndexOf', 'isEmpty', 'chain']; _.each(methods, function(method) { Collection.prototype[method] = function() { var args = slice.call(arguments); args.unshift(this.models); return _[method].apply(_, args); }; }); var attributeMethods = ['groupBy', 'countBy', 'sortBy']; _.each(attributeMethods, function(method) { Collection.prototype[method] = function(value, context) { var iterator = _.isFunction(value) ? value : function(model) { return model.get(value); }; return _[method](this.models, iterator, context); };