1
00:00:00,000 --> 00:00:05,000
So now, we've updated our form to be able to take our latitude and longitude and 

2
00:00:05,000 --> 00:00:09,000
place it into our object.

3
00:00:09,000 --> 00:00:13,000
We can see it down here in the JavaScript inspector, however, it's not showing up

4
00:00:13,000 --> 00:00:19,000
in the view, and that's because we haven't explained how to display in the view.

5
00:00:19,000 --> 00:00:23,000
So, our next task is to go and update the view to, let's say, show the

6
00:00:23,000 --> 00:00:27,000
latitude and longitude of a particular note.

7
00:00:27,000 --> 00:00:34,000
To do this, we're going to go back to the index.html file in our code.

8
00:00:34,000 --> 00:00:39,000
Now we want to find the template for our show view which should be 

9
00:00:39,000 --> 00:00:41,000
down at the bottom of the page.

10
00:00:41,000 --> 00:00:43,000
So, we have a couple of templates.

11
00:00:43,000 --> 00:00:47,000
We have our note list item template, which is not what we're looking for.

12
00:00:47,000 --> 00:00:50,000
That's how we display the items in the list.

13
00:00:50,000 --> 00:00:54,000
The note detail template is what we're looking for.

14
00:00:54,000 --> 00:00:56,000
And you remember, we basically just put all of our template information 

15
00:00:56,000 --> 00:01:02,000
inside of this script tag, and anytime we use these special angle brackets,

16
00:01:02,000 --> 00:01:07,000
%=, it means that it will take the result of this expression and 

17
00:01:07,000 --> 00:01:10,000
place it into the code where this tag is.

18
00:01:10,000 --> 00:01:15,000
So, for instance, this template is passed our note object, and to get the title,

19
00:01:15,000 --> 00:01:27,000
we call get and pass in title, and we show the body the same way,

20
00:01:27,000 --> 00:01:30,000
inside of the content section of this template, and let's just give it a 

21
00:01:30,000 --> 00:01:44,000
nice little header, and let's just print out 

22
00:01:44,000 --> 00:01:49,000
the latitude and longitude and place them in square brackets.

23
00:01:49,000 --> 00:01:56,000
So, we'll open up an <%= to insert the information into our template, 

24
00:01:56,000 --> 00:02:07,000
and then we'll do note.get('latitude'),

25
00:02:07,000 --> 00:02:12,000
and we'll close this tag here and we'll put a comma, a literal comma, 

26
00:02:12,000 --> 00:02:17,000
into the template, and then we'll do the same for our longitude, so we'll do 

27
00:02:17,000 --> 00:02:29,000
note.get('longitude'), and we'll close out that tag as well.

28
00:02:29,000 --> 00:02:38,000
So, I'm going to save out index.html, and if we go back and refresh,

29
00:02:38,000 --> 00:02:47,000
now we can see the location with our latitude of 28.5 and longitude of -81.

30
00:02:47,000 --> 00:02:49,000
Now, that's all great.

31
00:02:49,000 --> 00:02:52,000
Let's go back into all notes and our new view.

32
00:02:52,000 --> 00:02:58,000
Let's create a normal note without location and see what happens.

33
00:02:58,000 --> 00:03:07,000
So, we'll give it some body text, and I'm going to make sure "Tag With Location"

34
00:03:07,000 --> 00:03:12,000
is set to no, so if we save it out, looks like we just have a little bit of a 

35
00:03:12,000 --> 00:03:16,000
freak out there, but if we go to all notes and click on a normal note, 

36
00:03:16,000 --> 00:03:20,000
we can see that we still have the location here, but we have empty values

37
00:03:20,000 --> 00:03:27,000
for the latitude and longitude, and obviously, this is not what we want.

38
00:03:27,000 --> 00:03:31,000
So, let's go back to our template, and let's make it so this location

39
00:03:31,000 --> 00:03:35,000
information is only shown if there is location information 

40
00:03:35,000 --> 00:03:37,000
associated with this note.

41
00:03:37,000 --> 00:03:41,000
What we can do is use an if statement inside of a normal template tag.

42
00:03:41,000 --> 00:03:47,000
So, instead of doing <%=, we're just going to use <%, and this is going to just 

43
00:03:47,000 --> 00:03:50,000
be for holding our if statement.

44
00:03:50,000 --> 00:03:55,000
So, let's create an empty if statement first, and I'm going to leave the curly braces open

45
00:03:55,000 --> 00:03:58,000
and close the tag.

46
00:03:58,000 --> 00:04:01,000
Now I'm going to go ahead and indent these two lines a little bit, 

47
00:04:01,000 --> 00:04:05,000
and now to match that if statement, I'm going to open up another tag

48
00:04:05,000 --> 00:04:12,000
and just put the closing braces and to make it clear, let's add a comment 

49
00:04:12,000 --> 00:04:15,000
saying what we're closing out here.

50
00:04:15,000 --> 00:04:17,000
We're ending our if statement.

51
00:04:17,000 --> 00:04:23,000
Now, how do we determine if we want to show the location or not?

52
00:04:23,000 --> 00:04:28,000
Well, we could do a check to see if the latitude and longitude are set, however,

53
00:04:28,000 --> 00:04:34,000
it's really bad practice inside of a template to do a lot of logic and computation.

54
00:04:34,000 --> 00:04:37,000
Basically, the if statement is really as complex as we want to get, 

55
00:04:37,000 --> 00:04:42,000
and we want to abstract the contents of the if clause into a simple

56
00:04:42,000 --> 00:04:47,000
method that really describes what we're checking for.

57
00:04:47,000 --> 00:04:52,000
So, instead of typing "ifnote.getlatitude" and note.getlongitude,

58
00:04:52,000 --> 00:04:59,000
we will say "note.isGeoTagged," and this is a method we have not yet created,

59
00:04:59,000 --> 00:05:02,000
but what it does is, it provides us a very clear indication of what we're

60
00:05:02,000 --> 00:05:05,000
checking for in our if statement.

61
00:05:05,000 --> 00:05:08,000
We're checking if the note is GeoTagged.

62
00:05:08,000 --> 00:05:11,000
So, I'm going to save out the template, and then what we need to do is

63
00:05:11,000 --> 00:05:17,000
update our model code to include a method called "isGeoTagged," which returns true

64
00:05:17,000 --> 00:05:20,000
if it has the location information on it.

65
00:05:20,000 --> 00:05:24,000
So, let's go back to our application.js, and let's go back to our

66
00:05:24,000 --> 00:05:31,000
note model, which is right here, and all we really have is an initializer,

67
00:05:31,000 --> 00:05:41,000
so under the initializer, I'm going to add a new method called "isGeoTagged,"

68
00:05:41,000 --> 00:05:44,000
and it's not going to take any arguments, and what it's going to do is return

69
00:05:44,000 --> 00:06:01,000
this.get('latitude') and this.get('longitude').

70
00:06:01,000 --> 00:06:06,000
And this will only return true if both latitude and longitude have true values or

71
00:06:06,000 --> 00:06:10,000
numbers and not null, and let's go ahead and add a comment 

72
00:06:10,000 --> 00:06:21,000
to explain exactly what this does.

73
00:06:21,000 --> 00:06:27,000
So, now we should be able to go back to our code in our browser,

74
00:06:27,000 --> 00:06:32,000
and let's just start at the homepage, and if we go to all notes 

75
00:06:32,000 --> 00:06:39,000
and take a look at a normal note, there's no section for the location data,

76
00:06:39,000 --> 00:06:44,000
but if we go to our location note, the location data shows up.

77
00:06:44,000 --> 00:06:49,000
So, now we have our latitude and longitude, but that's not really very useful for us.

78
00:06:49,000 --> 00:06:53,000
What would be really nice is to create a map with a pin over where we created our note.