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 update the template for the Note View to display the latitude and longitude if it is given for a note.
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
So now, we've updated our form to be able to take our latitude and longitude and
0:00
place it into our object.
0:05
We can see it down here in the JavaScript inspector, however, it's not showing up
0:09
in the view, and that's because we haven't explained how to display in the view.
0:13
So, our next task is to go and update the view to, let's say, show the
0:19
latitude and longitude of a particular note.
0:23
To do this, we're going to go back to the index.html file in our code.
0:27
Now we want to find the template for our show view which should be
0:34
down at the bottom of the page.
0:39
So, we have a couple of templates.
0:41
We have our note list item template, which is not what we're looking for.
0:43
That's how we display the items in the list.
0:47
The note detail template is what we're looking for.
0:50
And you remember, we basically just put all of our template information
0:54
inside of this script tag, and anytime we use these special angle brackets,
0:56
%=, it means that it will take the result of this expression and
1:02
place it into the code where this tag is.
1:07
So, for instance, this template is passed our note object, and to get the title,
1:10
we call get and pass in title, and we show the body the same way,
1:15
inside of the content section of this template, and let's just give it a
1:27
nice little header, and let's just print out
1:30
the latitude and longitude and place them in square brackets.
1:44
So, we'll open up an <%= to insert the information into our template,
1:49
and then we'll do note.get('latitude'),
1:56
and we'll close this tag here and we'll put a comma, a literal comma,
2:07
into the template, and then we'll do the same for our longitude, so we'll do
2:12
note.get('longitude'), and we'll close out that tag as well.
2:17
So, I'm going to save out index.html, and if we go back and refresh,
2:29
now we can see the location with our latitude of 28.5 and longitude of -81.
2:38
Now, that's all great.
2:47
Let's go back into all notes and our new view.
2:49
Let's create a normal note without location and see what happens.
2:52
So, we'll give it some body text, and I'm going to make sure "Tag With Location"
2:58
is set to no, so if we save it out, looks like we just have a little bit of a
3:07
freak out there, but if we go to all notes and click on a normal note,
3:12
we can see that we still have the location here, but we have empty values
3:16
for the latitude and longitude, and obviously, this is not what we want.
3:20
So, let's go back to our template, and let's make it so this location
3:27
information is only shown if there is location information
3:31
associated with this note.
3:35
What we can do is use an if statement inside of a normal template tag.
3:37
So, instead of doing <%=, we're just going to use <%, and this is going to just
3:41
be for holding our if statement.
3:47
So, let's create an empty if statement first, and I'm going to leave the curly braces open
3:50
and close the tag.
3:55
Now I'm going to go ahead and indent these two lines a little bit,
3:58
and now to match that if statement, I'm going to open up another tag
4:01
and just put the closing braces and to make it clear, let's add a comment
4:05
saying what we're closing out here.
4:12
We're ending our if statement.
4:15
Now, how do we determine if we want to show the location or not?
4:17
Well, we could do a check to see if the latitude and longitude are set, however,
4:23
it's really bad practice inside of a template to do a lot of logic and computation.
4:28
Basically, the if statement is really as complex as we want to get,
4:34
and we want to abstract the contents of the if clause into a simple
4:37
method that really describes what we're checking for.
4:42
So, instead of typing "ifnote.getlatitude" and note.getlongitude,
4:47
we will say "note.isGeoTagged," and this is a method we have not yet created,
4:52
but what it does is, it provides us a very clear indication of what we're
4:59
checking for in our if statement.
5:02
We're checking if the note is GeoTagged.
5:05
So, I'm going to save out the template, and then what we need to do is
5:08
update our model code to include a method called "isGeoTagged," which returns true
5:11
if it has the location information on it.
5:17
So, let's go back to our application.js, and let's go back to our
5:20
note model, which is right here, and all we really have is an initializer,
5:24
so under the initializer, I'm going to add a new method called "isGeoTagged,"
5:31
and it's not going to take any arguments, and what it's going to do is return
5:41
this.get('latitude') and this.get('longitude').
5:44
And this will only return true if both latitude and longitude have true values or
6:01
numbers and not null, and let's go ahead and add a comment
6:06
to explain exactly what this does.
6:10
So, now we should be able to go back to our code in our browser,
6:21
and let's just start at the homepage, and if we go to all notes
6:27
and take a look at a normal note, there's no section for the location data,
6:32
but if we go to our location note, the location data shows up.
6:39
So, now we have our latitude and longitude, but that's not really very useful for us.
6:44
What would be really nice is to create a map with a pin over where we created our note.
6:49
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