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
Well done!
You have completed HTML5 Mobile Web Applications!
You have completed HTML5 Mobile Web Applications!
Preview
In this video we create a new List View that will display our notes sorted by the distance from our current location.
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
[Jim Hoskins] So we've added the ability to tag notes with our location
0:00
and we've figured out how to add a map to the show view.
0:03
Another cool feature of our app might be to not only sort all notes--
0:07
for instance, by name--but to also be able to see the Notes nearest to you,
0:12
and that is what this second menu item is going to be reserved for.
0:18
So what's involved with actually being able to sort the Nearest Notes to you?
0:22
Well, one, we need to have Notes that have location, which we have.
0:27
We need to get the current location of the user, which is something that we know how to do
0:31
but we're going to have to come up with the idea of the current location in the application.
0:35
And then, we need a way to compare the distance between each Note
0:42
and the current location in the world.
0:46
So those are the steps we need to go through.
0:49
Let's go ahead and start with creating the list for the Nearest Notes.
0:51
So basically, we need to create another list view here,
0:55
just like we did for All Notes.
0:59
In fact, it's going to be very, very similar.
1:01
So I'm going to go into index.html
1:04
and if we take a look at our List of Notes, we're pretty much going to do the same thing
1:07
but with a little bit of a different twist.
1:11
So let's go ahead and just change this to (Alphabetical)
1:13
and basically, I'm going to take the structure of the list of Notes
1:20
and I'm going to create a new view, which we'll call the Nearest,
1:25
and I've pasted it in here.
1:28
So I've given it an id="nearest" so that's the URL we're going to access it from,
1:31
and pretty much all of it's the same.
1:35
It has a header with a back button
1:37
and header of Nearest Notes, and the only thing that I've really added to this view
1:39
that wasn't in our original list view is this extra button in the header,
1:44
which I've created using jQuery Mobile.
1:49
It's called the Locate button, and this will be what actually triggers
1:52
finding out the user's current location.
1:57
We could also have a function so it locates the user when they first load the page,
2:00
but right now, I'm going to wire it up specifically to this button.
2:05
Then I have our content, which just has a list view with the id=nearest_notes
2:09
which is where the actual list of Notes will go.
2:14
So now that we've added the new view into our HTML,
2:17
let's check it out in the browser and see where we get.
2:20
If I refresh and we click on Nearest Notes,
2:25
now that we have a Nearest Page, we have our Nearest Notes here
2:27
and a Locate button that does nothing, and our Back button.
2:30
So we now have sort of a skeleton for the place where our list of Nearest Notes will go.
2:35
So now that we have our jQuery Mobile page set up,
2:43
let's go ahead and create a Backbone view
2:45
so we can handle the clicking of the Locate button appropriately.
2:48
So let's hop into our application.js
2:53
and let's see where we're going to put this.
2:56
I'm just going to place it right here,
3:04
and we're going to call this for our page--this is going to be the view for the entire page,
3:06
not the actual list itself.
3:11
We're going to call this class var NearestPageView =
3:15
and this will be a Backbone.View.extend({.
3:19
Let's go ahead and define the events that will be defined for this view.
3:29
Basically, we just want to handle the clicking of the Locate button.
3:33
So to define our events like we did before, we'll just do events: { here
3:37
and create an object
3:42
and the key is going to be a string that describes the action,
3:44
which would be "click" and the selector for the element that we're going to be listening to,
3:47
which is the button with the class .locate.
3:53
And when this happens, I want to "updateLocation".
3:57
So let's create our initliazer for this page view.
4:04
So we'll create initialize: function(options){
4:08
and there's going to be a subview, which is going to be our list view
4:14
that we want to keep track of, and that's going to be passed into the initializer,
4:18
so let's store it as a property, so we'll say this.listView = options.listView.
4:22
So we always want a list view to be passed in so that our page
4:33
can manage sorting and updating that list whenever we click the Update Location button.
4:37
So we defined that clicking the .locate should call the updateLocation method,
4:44
so let's go ahead and write that method out, too.
4:49
So we'll do updateLocation: function
4:52
and it's an event handler, so it will be passed an event object(e){
4:57
and basically, in this view, we're going to take a couple steps.
5:01
First, we're going to check if Geolocation is available.
5:04
If it is, we're going to do our normal Geolocation query
5:07
and if we get a result from that, what we're going to do is store the results of that query
5:11
in a property of our application object.
5:15
After we do that, we're going to want to sort our list view,
5:19
and we do that because now our location is potentially changed
5:24
so we need to re-sort since the sort will take into account this newly updated location.
5:28
Let's start off with a check to make sure we have Geolocation available,
5:33
so let's check if("geolocation" in navigator){ object,
5:37
so if we have Geolocation capabilities, we want to do a Geolocation query.
5:47
So we'll do navigator.geolocation.getCurrentPosition
5:52
which take a callback (function) which will be passed a (position).
6:00
And now, inside of this callback function is where we will handle storing our information.
6:06
So if we have the position object and the position object has a .coordinates property on it,
6:12
what we want to do is // Set Current Location
6:22
and for our application, what I'm going to do is define that App.currentlocation
6:30
will be where we store the current location of the user and we will set it to position.coords.
6:37
Now, this is just a normal JavaScript variable; if you refresh the page,
6:45
the current location will be lost.
6:49
It is not stored in a database, and I think that's fine
6:51
because it's something that's going to be updated a lot.
6:54
Now, the last thing we want to do is to update the list view
6:58
and tell its collection to sort itself.
7:01
Now, one way we could do this is to call the list views collections sort method directly
7:06
and I think that's what we'll go ahead and do.
7:12
Now, in order to get to the list view for this view,
7:15
we need to access this.listView, but since we're in a callback function for getCurrentPosition,
7:18
the value of this has been changed since we're now in a new function.
7:24
So what we have to do is somewhere outside of the function,
7:28
we will assign the value of this to a variable and we'll give it the name pageView,
7:31
so pageView = this;.
7:38
So after we set the current location, we can grab pageView,
7:41
which is this, and grab the listView,
7:47
and on its collection, we will call .sort();.
7:50
So now we've generated a pageView for our nearest list,
7:59
let's go ahead and instantiate it in our page to handle our actual view in the HTML.
8:03
So down at the bottom is where we're actually instantiating our views,
8:10
and we'll just scroll down to where we instantiated our other views,
8:15
and I'm just going to place it right down here.
8:22
So we're going to assign it into app.views and we'll call this view the nearest_page
8:27
and we'll instantiate a new NearestPageView with the element of the id "#nearest"
8:33
and we're going to pass in a listView, which we'll call App.views.list_distance.
8:39
Now, we haven't created that yet, so let's go ahead and instantiate
8:45
the actual list view that will be inside of this page view.
8:50
Now we're going to just reuse the Note list view that we used for our other Notes list
8:55
and we're just going to pass it a different element.
9:00
So right here, this is the view for our actual list within our nearest page,
9:03
so the list will be based on nearest_notes
9:12
and the collection is based on app.collections.notes_distance.
9:15
Now, we haven't created that collection, so let's go ahead and create that collection.
9:22
The reason we're creating a new collection for our Nearest Notes
9:31
is because we're going to be using a different comparator
9:35
where our all_notes is using a comparator that checks based on the title of the Note
9:38
and its alphabetical value.
9:44
In our collection here, we will be actually comparing
9:46
based on the distance of the Notes coordinates from the current coordinates,
9:50
and that's a comparator that we're going to have to write in a moment.
9:54
So let's just call this notes_distance,
9:59
and we'll create a new NoteList
10:03
with null initial values (null, {
10:07
and for our options, we're going to create a comparator:
10:10
which is a function that takes a (note)
10:15
and it will return some value, and right now we'll just say 0 and it will not be allowed to sort.
10:19
So let's see if all of our code actually fits together
10:25
because it's a good time for a sanity check to make sure we're not going to get any errors
10:28
with all of the code that we just added in.
10:32
So let's refresh--all right, no errors so far.
10:38
if we click on Nearest Notes, we get a list of all of our Notes.
10:42
Now, right now the sorting is not working,
10:46
but at least we do have our Notes.
10:49
Let's see if the view will handle our click here on the Locate button.
10:51
It doesn't look like anything's happening, but it may have,
10:56
because we may have already authorized the browser to share our current location,
10:59
so it's not going to ask us every time.
11:04
One way we can debug to see if the current location is set
11:07
is in the JavaScript console, we'll check the Notes app,
11:10
which is our application instance, and see if the current location has been set.
11:16
If we do that, we can see that there's a coordinates object assigned to it.
11:23
So next, we need to create the comparator function that will compare the current location
11:27
to each of the Notes' locations.
11:31
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