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.
[?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 up