"Ruby Foundations" was retired on September 23, 2015. You are now viewing the recommended replacement.
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