1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:06,000
[Handling Data Updates]

3
00:00:06,000 --> 00:00:09,000
[Jim Hoskins] So we've created the code to create our list of notes

4
00:00:09,000 --> 00:00:13,000
and it looks like all of our notes are here from when we were manually testing

5
00:00:13,000 --> 00:00:15,000
and using the form to input notes,

6
00:00:15,000 --> 00:00:18,000
so let's see what happens if we refresh this page.

7
00:00:18,000 --> 00:00:21,000
One of the cool things about jQuery Mobile

8
00:00:21,000 --> 00:00:25,000
is that it uses the anchor or the fragment part of the URL

9
00:00:25,000 --> 00:00:27,000
to bookmark what part of the page we're on,

10
00:00:27,000 --> 00:00:32,000
so that allows us to use a Back button normally as well as allows us to refresh the page

11
00:00:32,000 --> 00:00:37,000
as well as we could bookmark this page and simply navigate to the All page.

12
00:00:37,000 --> 00:00:41,000
So it looks like it creates all the notes for us when we load the page.

13
00:00:41,000 --> 00:00:50,000
What happens if we go back without reloading the page and we click on New Note?

14
00:00:50,000 --> 00:00:53,000
So let's type in Another Test

15
00:00:53,000 --> 00:01:01,000
and we'll add some Body Text to it,

16
00:01:01,000 --> 00:01:03,000
and let's save it out.

17
00:01:03,000 --> 00:01:05,000
So now we've saved our New Note,

18
00:01:05,000 --> 00:01:07,000
and let's see if that updates our Note List.

19
00:01:07,000 --> 00:01:11,000
Now, it looks like it didn't quite work, so what happened here?

20
00:01:11,000 --> 00:01:17,000
Well, it created another Test Note; however, it's not formatted like a ListView

21
00:01:17,000 --> 00:01:23,000
and that's because the actual ListView is created when jQuery Mobile first renders

22
00:01:23,000 --> 00:01:26,000
this particular subpage before the All page,

23
00:01:26,000 --> 00:01:30,000
so if we were to refresh this when it loads up the page for the first time,

24
00:01:30,000 --> 00:01:34,000
it'll take all six of our notes and make them formatted correctly.

25
00:01:34,000 --> 00:01:38,000
So if we were to refresh, we would see that it's now formatted correctly,

26
00:01:38,000 --> 00:01:42,000
but as soon as we go back and create a New Note:

27
00:01:42,000 --> 00:01:45,000
Seventh Note

28
00:01:45,000 --> 00:01:48,000
Text

29
00:01:48,000 --> 00:01:51,000
and save it out,

30
00:01:51,000 --> 00:01:54,000
because we're saving into localStorage, the code that is watching it

31
00:01:54,000 --> 00:01:58,000
and going to redraw that list sees that there's new information 

32
00:01:58,000 --> 00:02:00,000
and it redraws the list.

33
00:02:00,000 --> 00:02:03,000
However, jQuery Mobile has rendered the Notes page once before,

34
00:02:03,000 --> 00:02:08,000
so it doesn't automatically re-render the notes as a nicely formatted mobile list.

35
00:02:08,000 --> 00:02:12,000
Instead, it's just a normal unordered list of links.

36
00:02:12,000 --> 00:02:16,000
So what we need to do is whenever we update and render our list,

37
00:02:16,000 --> 00:02:22,000
we need to re-render the list as a nicely formatted mobile list.

38
00:02:22,000 --> 00:02:26,000
So let's jump into our code again.

39
00:02:26,000 --> 00:02:31,000
This is going to be a job for our NoteListView because we want to

40
00:02:31,000 --> 00:02:34,000
look at whenever we render the whole NoteList over again,

41
00:02:34,000 --> 00:02:38,000
and at that point we want to trigger the rendering of the list

42
00:02:38,000 --> 00:02:45,000
in a nicely-formatted version.

43
00:02:45,000 --> 00:02:49,000
So any time we change our ListView, which is defined here--

44
00:02:49,000 --> 00:02:52,000
and that's going to be in the addOne function--

45
00:02:52,000 --> 00:02:56,000
what we want to do is look for the element that represents our list,

46
00:02:56,000 --> 00:03:00,000
which in this case is (this.el)

47
00:03:00,000 --> 00:03:03,000
and we're going to wrap it in jQuery $

48
00:03:03,000 --> 00:03:08,000
and what we want to do is create a ListView plugin for it.

49
00:03:08,000 --> 00:03:11,000
The ListView is implemented as a jQuery plugin

50
00:03:11,000 --> 00:03:15,000
and I was able to deduce this by looking around in the source code,

51
00:03:15,000 --> 00:03:21,000
and we can initialize a ListView by using the jQuery ListView plugin function.

52
00:03:21,000 --> 00:03:23,000
So we could have one of two cases.

53
00:03:23,000 --> 00:03:27,000
First, one thing that could happen is that as we're adding new items,

54
00:03:27,000 --> 00:03:29,000
this element has not been initialized as a ListView,

55
00:03:29,000 --> 00:03:33,000
and in that case, we want to initialize a ListView for this element.

56
00:03:33,000 --> 00:03:36,000
The other case is it already has been initialized

57
00:03:36,000 --> 00:03:39,000
and we need to tell the plugin to refresh itself

58
00:03:39,000 --> 00:03:41,000
because a new item has been added.

59
00:03:41,000 --> 00:03:46,000
The way we can do this is we can call .listview().

60
00:03:46,000 --> 00:03:53,000
and then we can call listview("refresh").

61
00:03:53,000 --> 00:03:57,000
The reason we have to call listview and then listview("refresh")

62
00:03:57,000 --> 00:04:01,000
 is we want to absolutely make sure that we've initialized this listview

63
00:04:01,000 --> 00:04:06,000
before we try to call the refresh, which will be used to update the information 

64
00:04:06,000 --> 00:04:08,000
on the listview.

65
00:04:08,000 --> 00:04:10,000
For instance, if we added a single item to the list,

66
00:04:10,000 --> 00:04:13,000
while the other ones would be styled nicely, 

67
00:04:13,000 --> 00:04:15,000
the new item would be unstyled.

68
00:04:15,000 --> 00:04:19,000
So let's try this out and see if it works.

69
00:04:19,000 --> 00:04:22,000
I'm going to refresh from here

70
00:04:22,000 --> 00:04:26,000
and we get an Uncaught TypeError--object has no method "listview,"

71
00:04:26,000 --> 00:04:30,000
and the reason that this happens is in this particular case, 

72
00:04:30,000 --> 00:04:34,000
the way our code is loaded is Backbone does all of its work first.

73
00:04:34,000 --> 00:04:37,000
So we load in Backbone as a framework 

74
00:04:37,000 --> 00:04:40,000
and then we do all of this Backbone view code

75
00:04:40,000 --> 00:04:43,000
and that will be things like loading from the database 

76
00:04:43,000 --> 00:04:47,000
and eventually calling this addOne and addAll methods

77
00:04:47,000 --> 00:04:49,000
as sort of the first load.

78
00:04:49,000 --> 00:04:52,000
It's going to pull all of the data out and try to construct the HTML

79
00:04:52,000 --> 00:04:54,000
based on that data right away.

80
00:04:54,000 --> 00:04:58,000
But all of this is happening before we've loaded jQuery Mobile,

81
00:04:58,000 --> 00:05:02,000
so we can't actually do the listview initialization at this point,

82
00:05:02,000 --> 00:05:04,000
even though we can do the addAll.

83
00:05:04,000 --> 00:05:10,000
So one way we can work around that is to first check if jQuery Mobile is loaded

84
00:05:10,000 --> 00:05:14,000
because we know jQuery is loaded, but jQuery Mobile will be loaded afterwards,

85
00:05:14,000 --> 00:05:17,000
so in those cases, we do want to initialize the listview. 

86
00:05:17,000 --> 00:05:22,000
Otherwise, we don't, and we'll wait until jQuery Mobile actually loads itself

87
00:05:22,000 --> 00:05:24,000
and does the work automatically for us.

88
00:05:24,000 --> 00:05:30,000
So our test for this is going to be if("mobile" in $) 

89
00:05:30,000 --> 00:05:33,000
or we could say jQuery, 

90
00:05:33,000 --> 00:05:38,000
but in our case, we're just going to use the $ that jQuery provides.

91
00:05:38,000 --> 00:05:40,000
So let's encapsulate that in an if statement

92
00:05:40,000 --> 00:05:43,000
and see if we're able to successfully work around that.

93
00:05:43,000 --> 00:05:45,000
So I'm going to refresh,

94
00:05:45,000 --> 00:05:50,000
and it looks like we have My Note and all of the other notes that we've created.

95
00:05:50,000 --> 00:05:52,000
No errors in our log here.

96
00:05:52,000 --> 00:05:56,000
Let's try going back and creating a New Note.

97
00:05:56,000 --> 00:06:03,000
All right, we'll do One More Test, 

98
00:06:03,000 --> 00:06:09,000
and I'm going to give it another Body Text here,

99
00:06:09,000 --> 00:06:10,000
and let's save it out.

100
00:06:10,000 --> 00:06:16,000
So if we go back to All Notes

101
00:06:16,000 --> 00:06:19,000
and One More Test is displayed right here.

102
00:06:19,000 --> 00:06:22,000
Now is a good chance for us to jump over to our simulator

103
00:06:22,000 --> 00:06:25,000
and try out our code on an actual IOS simulator.

104
00:06:25,000 --> 00:06:28,000
So I'm going to refresh,

105
00:06:28,000 --> 00:06:31,000
and let's go ahead and click New Note.

106
00:06:31,000 --> 00:06:34,000
This will be our First Mobile Note,

107
00:06:34,000 --> 00:06:38,000
and Here is some text.

108
00:06:38,000 --> 00:06:42,000
We can make multiple lines and it will nicely expand to fit our text--

109
00:06:42,000 --> 00:06:46,000
and Some more text.

110
00:06:46,000 --> 00:06:50,000
Cool. And then we hit the Save, it pops away nice and smooth.

111
00:06:50,000 --> 00:06:55,000
If we click on All Notes, we get our First Mobile Note.

112
00:06:55,000 --> 00:06:58,000
Now, again, what happens if we click on these?

113
00:06:58,000 --> 00:07:01,000
We're going to get an error loading the page and that's going to be the same

114
00:07:01,000 --> 00:07:05,000
for all of our applications and that's because we haven't created the detailed views

115
00:07:05,000 --> 00:07:07,000
for our notes.

116
00:07:07,000 --> 00:07:11,000
Another thing you can see down here is as we click them,

117
00:07:11,000 --> 00:07:16,000
you can see that there's an AJAX request made for localhost/note

118
00:07:16,000 --> 00:07:20,000
and then the unique id for that particular note.