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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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