"CSS Basics (2014)" was retired on July 12, 2021. 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 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