Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we learn how to apply sorts to Collections in Backbone.js. here.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[?music?]
0:00
[Sorting Collections]
0:02
[Jim Hoskins] So you may have noticed we have All Notes here.
0:06
Right now they're just sort of sorted in whatever order they were put into here.
0:10
What I'd like to do is actually sort these by their title
0:14
and later on when we add geolocation,
0:18
I'm going to have a different collection that's sorted
0:21
by how close to my current location that note is
0:23
and we can have all sorts of different sorts.
0:27
So here where I have All Notes, I want this to be alphabetically sorted
0:29
and we can see that we're not quite there yet.
0:33
In fact, you can see when we defined our view for this list,
0:36
we actually called this ListView list_alphabetical
0:38
and that's because ultimately, I did plan to make sure that this list
0:41
was in alphabetical order.
0:45
Now, here we have our collection called AllNotes
0:48
and this is actually what we want to sort on--we want to sort our collection.
0:51
That way, when our view here is displaying them,
0:55
they'll just simply be displayed in alphabetical order.
0:58
Now, to do that, all we need to do is when we define a collection,
1:01
pass it an option called comparator.
1:05
comparator:
1:09
The comparator is a method that you can pass to a collection
1:12
and Backbone will automatically sort the collection every time it is updated
1:17
based on that comparator.
1:21
So how it works is we pass it a function:
1:23
comparator: function(){
1:26
and that function is going to receive an instance; in our case, a (note){.
1:28
And so what we want to do here in our comparator function
1:33
is return a property that Backbone is ultimately going to sort on,
1:36
so if we wanted to sort alphabetically on our title,
1:41
we're going to return our title.
1:44
So one way we could do that is return note.get("title");
1:46
So now any time Backbone gets the collection,
1:54
whether it's fetching or adding a new item, it's going to call its own sort function
1:59
which will use comparator to get the title
2:04
and ultimately sort on that title.
2:06
So let's save this out and go back to our test here in Chrome,
2:08
and if we refresh,
2:12
we can see that it's not quite working.
2:15
That was my mistake--I forgot that the collection constructor
2:20
actually takes an argument before this options parameter
2:25
and that would be the actual collection of notes we want to start with.
2:29
Now, when we instantiate this,
2:33
we don't want to actually start with a collection of predefined notes--
2:35
those are going to be defined later--
2:38
so what we can do is pass (null) as the first argument
2:40
and the second argument is going to be any optional additional parameters
2:42
to our collection.
2:47
So now if we save this out and refresh it again,
2:48
we can see we now have a sorted list.
2:51
We have A, M, N, O, P, S, T,
2:53
and that looks good, but there's still one little bug, and let's check it out.
2:58
We'll create a new one, and what I'll do is I'll call this a brand new note
3:04
and we have some Text here.
3:11
So if we save this out and we go to All Notes,
3:15
we can see that brand new doesn't appear between A and M like you would expect.
3:20
Instead, it appears down here, and this is not because it was just added that way.
3:24
Even if we refresh it, we can see that it always sorts to the bottom
3:29
and that's because the way it is sorting is on the string
3:33
and when we sort a string,
3:36
the case of the string actually matters, so the lowercase "b"
3:38
actually comes after the uppercase "Z" and a normal string sort.
3:43
So what we want to do is for our comparator actually either lowercase everything
3:48
or uppercase everything.
3:53
That way, everything is sorted with no regard to the actual case that it's in,
3:55
and that's easy enough for us to do.
3:59
What we could do is just call .toLowerCase(); on our string here,
4:02
and that will lowercase the actual title so no matter what the casing is,
4:08
when it gets to the comparator, it will always be lowercase and sorted in that manner.
4:12
Now, what if the title is null?
4:17
Well, it shouldn't be possible for it to be null, but let's be a little bit safe.
4:20
If get("title") returns null and we call LowerCase();,
4:24
we're going to be thrown an error saying that there's no method
4:27
to LowerCase(); on null or some other false object.
4:30
So what we want to do is we'll just wrap this in parentheses here,
4:34
and inside of these parentheses we'll either return the "title"
4:39
or if we get a null or undefined value, we'll use the or operator here
4:43
to simply return a string.
4:48
That way, we'll always get a string here that lowercase can be called on,
4:51
so just a little bit of safety.
4:56
So if we go ahead and save our code out and we refresh our page,
4:58
now we're sorted insensitive to the actual case of our title.
5:05
So now we have our application able to save notes and display notes to our screen.
5:10
In the next Master Class, we'll begin adding more features,
5:15
including the ability to add geolocation data to each of our notes.
5:18
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up