FREELessons: 24Length: 1.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Sorting Collections

Backbone collections also have the ability to be sorted. So let's take a look at that. We still have our collection of books from our previous lesson. And if we look at the order that they are in right now, just by plucking the title, you can see we have this order right here. Now there are There are a couple of ways we can do the sorting. First of all, we can set a comparator on the collection. So if I say books.comparator, and I should note here I'm putting it specifically on this book's instance. But we could definitely put this comparator property in our collection class and have this work for all of our book collections. So anyway, we'll set books.comparator and we'll set it equal to title. And what this means is that from this point on, whenever we add a book to our collection, it will be sorted by the title. However, currently, you can see this doesn't actually change our current collection. So what we need to do Is books.sort, and if I do that, it will actually change that collection. And so now, if I pluck the titles, you can see, we have these sorted alphabetically by the title. Now, sometimes, you won't just want to sort by a single attribute. Sometimes, you may want to do some calculation. So in those cases, you can actually set the comparator to a function instead of just a name of an attribute. So for example, we could set books.comparator equal to a function that takes a single model and performs some calculation and returns the value that should be sorted by. In this case, I'll do model.get('author'); so we, We could've done this with just setting comparator to the string author, but you can see how this function would work. And so now if I do books.sort again and once again we pluck the title, you can see that this time we are sorted by author. And actually you'll probably see that better if I pluck the author instead. Yes, there we are, sorted by author. Now also you could set the comparator equal to a function that takes two models, for example modela and modelb. And when this is the case you have to return either a positive number, a negative number, or zero according to the usual rules that you're familiar with when sorting JavaScript arrays. So for example, we'll do modela.get('title') and we can say get('title').length, and we can return the difference between that and modelb.get('title').length. There you go. And so now, if we do books.sort, and books.pluck('title') you can see that we are actually sorted from shortest title, to longest title. Which is kind of a weird way to sort, but it shows how you can use a comparator with two parameters. So to sum it up, you can either set a collections comparator to a single attribute name, a comparator function that takes a single model and returns the value by which to sort each model, or a comparator function that takes two models and returns a number that says how those two models should be sorted in relation to one another.

Back to the top