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 look at what happens when the Collection is updated and the View is updated. We learn how to refresh jQuery Mobile List Views. here.
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
[?music?]
0:00
[Handling Data Updates]
0:02
[Jim Hoskins] So we've created the code to create our list of notes
0:06
and it looks like all of our notes are here from when we were manually testing
0:09
and using the form to input notes,
0:13
so let's see what happens if we refresh this page.
0:15
One of the cool things about jQuery Mobile
0:18
is that it uses the anchor or the fragment part of the URL
0:21
to bookmark what part of the page we're on,
0:25
so that allows us to use a Back button normally as well as allows us to refresh the page
0:27
as well as we could bookmark this page and simply navigate to the All page.
0:32
So it looks like it creates all the notes for us when we load the page.
0:37
What happens if we go back without reloading the page and we click on New Note?
0:41
So let's type in Another Test
0:50
and we'll add some Body Text to it,
0:53
and let's save it out.
1:01
So now we've saved our New Note,
1:03
and let's see if that updates our Note List.
1:05
Now, it looks like it didn't quite work, so what happened here?
1:07
Well, it created another Test Note; however, it's not formatted like a ListView
1:11
and that's because the actual ListView is created when jQuery Mobile first renders
1:17
this particular subpage before the All page,
1:23
so if we were to refresh this when it loads up the page for the first time,
1:26
it'll take all six of our notes and make them formatted correctly.
1:30
So if we were to refresh, we would see that it's now formatted correctly,
1:34
but as soon as we go back and create a New Note:
1:38
Seventh Note
1:42
Text
1:45
and save it out,
1:48
because we're saving into localStorage, the code that is watching it
1:51
and going to redraw that list sees that there's new information
1:54
and it redraws the list.
1:58
However, jQuery Mobile has rendered the Notes page once before,
2:00
so it doesn't automatically re-render the notes as a nicely formatted mobile list.
2:03
Instead, it's just a normal unordered list of links.
2:08
So what we need to do is whenever we update and render our list,
2:12
we need to re-render the list as a nicely formatted mobile list.
2:16
So let's jump into our code again.
2:22
This is going to be a job for our NoteListView because we want to
2:26
look at whenever we render the whole NoteList over again,
2:31
and at that point we want to trigger the rendering of the list
2:34
in a nicely-formatted version.
2:38
So any time we change our ListView, which is defined here--
2:45
and that's going to be in the addOne function--
2:49
what we want to do is look for the element that represents our list,
2:52
which in this case is (this.el)
2:56
and we're going to wrap it in jQuery $
3:00
and what we want to do is create a ListView plugin for it.
3:03
The ListView is implemented as a jQuery plugin
3:08
and I was able to deduce this by looking around in the source code,
3:11
and we can initialize a ListView by using the jQuery ListView plugin function.
3:15
So we could have one of two cases.
3:21
First, one thing that could happen is that as we're adding new items,
3:23
this element has not been initialized as a ListView,
3:27
and in that case, we want to initialize a ListView for this element.
3:29
The other case is it already has been initialized
3:33
and we need to tell the plugin to refresh itself
3:36
because a new item has been added.
3:39
The way we can do this is we can call .listview().
3:41
and then we can call listview("refresh").
3:46
The reason we have to call listview and then listview("refresh")
3:53
is we want to absolutely make sure that we've initialized this listview
3:57
before we try to call the refresh, which will be used to update the information
4:01
on the listview.
4:06
For instance, if we added a single item to the list,
4:08
while the other ones would be styled nicely,
4:10
the new item would be unstyled.
4:13
So let's try this out and see if it works.
4:15
I'm going to refresh from here
4:19
and we get an Uncaught TypeError--object has no method "listview,"
4:22
and the reason that this happens is in this particular case,
4:26
the way our code is loaded is Backbone does all of its work first.
4:30
So we load in Backbone as a framework
4:34
and then we do all of this Backbone view code
4:37
and that will be things like loading from the database
4:40
and eventually calling this addOne and addAll methods
4:43
as sort of the first load.
4:47
It's going to pull all of the data out and try to construct the HTML
4:49
based on that data right away.
4:52
But all of this is happening before we've loaded jQuery Mobile,
4:54
so we can't actually do the listview initialization at this point,
4:58
even though we can do the addAll.
5:02
So one way we can work around that is to first check if jQuery Mobile is loaded
5:04
because we know jQuery is loaded, but jQuery Mobile will be loaded afterwards,
5:10
so in those cases, we do want to initialize the listview.
5:14
Otherwise, we don't, and we'll wait until jQuery Mobile actually loads itself
5:17
and does the work automatically for us.
5:22
So our test for this is going to be if("mobile" in $)
5:24
or we could say jQuery,
5:30
but in our case, we're just going to use the $ that jQuery provides.
5:33
So let's encapsulate that in an if statement
5:38
and see if we're able to successfully work around that.
5:40
So I'm going to refresh,
5:43
and it looks like we have My Note and all of the other notes that we've created.
5:45
No errors in our log here.
5:50
Let's try going back and creating a New Note.
5:52
All right, we'll do One More Test,
5:56
and I'm going to give it another Body Text here,
6:03
and let's save it out.
6:09
So if we go back to All Notes
6:10
and One More Test is displayed right here.
6:16
Now is a good chance for us to jump over to our simulator
6:19
and try out our code on an actual IOS simulator.
6:22
So I'm going to refresh,
6:25
and let's go ahead and click New Note.
6:28
This will be our First Mobile Note,
6:31
and Here is some text.
6:34
We can make multiple lines and it will nicely expand to fit our text--
6:38
and Some more text.
6:42
Cool. And then we hit the Save, it pops away nice and smooth.
6:46
If we click on All Notes, we get our First Mobile Note.
6:50
Now, again, what happens if we click on these?
6:55
We're going to get an error loading the page and that's going to be the same
6:58
for all of our applications and that's because we haven't created the detailed views
7:01
for our notes.
7:05
Another thing you can see down here is as we click them,
7:07
you can see that there's an AJAX request made for localhost/note
7:11
and then the unique id for that particular note.
7:16
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