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 learn how to combine Backbone and jQuery Mobile to create dynamic jQuery Mobile pages based on Backbone data.
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
[Creating Dynamic Pages]
0:02
So now we have our list of notes and we're displaying them right here
0:06
and let's see what happens when we try to click on one.
0:10
We get an error loading the page displayed here
0:13
and we can see in our JavaScript console that there was an attempt to get this URL:
0:16
localhost/note_ and then the id.
0:21
Now, if you look at our code,
0:25
what we're actually linking to is the anchor note_5d7and so on and so forth.
0:27
So what happens is when jQuery Mobile gets a link clicked to a page
0:34
where it can't find a div with that given id,
0:39
is it tries to create a URL out of that id and use an AJAX request
0:42
to try to get it back.
0:48
Now, of course, our server doesn't have a page with note_5d7 and so on,
0:50
so what we need to do is to actually create divs dynamically
0:55
with the appropriate ids so that when we do click on that,
0:59
the jQuery Mobile site is able to find the div that we need to click
1:03
and show it like a normal page.
1:08
Now, to construct this is not going to be too much different
1:10
from how we constructed our list.
1:13
Basically, what we're going to do is for each of our notes,
1:15
we're going to create a jQuery page for it where the title is the title of the note,
1:18
and the body will be the body text and any other information.
1:23
We're going to keep those sort of off-screen in a big list just like we have a list of these notes,
1:26
so every time we add a new note, we'll be adding not only a new list item to this list,
1:32
but a whole new page item to another div that we're not seeing right now.
1:37
So let's go to our code
1:42
and let's take a review.
1:47
We have our new page here and we're going to roll up our list of notes
1:49
because we're already done with that page
1:54
and so it's going to look a lot like it does here where we have an outer element
1:59
that is going to serve as the list of notes and then using Backbone,
2:03
we're going to fill in the contents of that container with all of our divs.
2:07
So we're going to create another div
2:20
and we're going to give this the div of "note-detail-list"
2:22
and this div won't be really shown at any time;
2:27
it's just going to be a container for us to fill in
2:30
with dynamically created jQuery Mobile pages.
2:33
So let's go to our code and work on the view
2:36
that's going to be this list of detail pages.
2:39
So the note for our note detail list
2:43
is going to be a lot like our NoteListView,
2:46
which we remember, we had an initializer and we're going to bind to a collection
2:48
which is our list of notes, so we're going to be looking at the same collection, actually.
2:52
And then, we're going to have the addOne for adding a new note
2:56
and the addAll for adding all of our notes.
3:00
I'm actually going to paste in the code for our note detail list and we'll go over it
3:03
because it's pretty much the same code for our NoteListView.
3:07
So here's the code for our NoteDetailList.
3:13
Again, we're just creating a new class that's going to extend the Backbone view.
3:17
Now, what I've done here a little bit differently is I'm actually defining the element
3:21
we want to use inside of our definition here
3:26
and I did that because we're only ever going to instantiate one of these
3:29
and it's always going to be connected to this div with the "#note-detail-list" id,
3:32
which we can see is what we just created here.
3:37
So now we take a look at our initializer, and again, we're just using the bindAll
3:44
to all of our methods here to make sure this is properly associated with them.
3:49
This is exactly what we did in our NoteDetailList view,
3:53
and we have the collection bindings,
3:57
and this collection is going to be the same collection of all of the notes
3:59
that we used in our NoteDetailList view.
4:03
When we add a note, we want to call this .addOne
4:06
and when we refresh the collection, we want to call this.addAll,
4:09
so the same method name, same hook-up, same everything.
4:13
And just like in our NoteDetailList, we have addOne
4:17
and what we do is we're going to create a new view instance
4:20
and this is going to be a NoteDetailView, which is going to be the next view
4:24
we are going to create, and that's going to represent a page for a note.
4:28
And then, we append the rendered view that we just created to this element,
4:31
which is this div, so we'll be adding the new page
4:37
onto our document.
4:40
The addAll is pretty much similar; we empty out our current view
4:43
and then we just go through each item in our collection and add one to it.
4:46
So we'll save that out and the next thing we'd need to go ahead and describe
4:52
is our NoteDetailView.
4:56
Our NoteDetailView will represent a page for a specific note--
4:58
the actual viewing of that note.
5:02
So I've pasted in the code for our NoteDetailView,
5:09
and this is a lot like the NoteListItemView and it will represent
5:12
an actual show page for a note.
5:16
This will be a jQuery Mobile page
5:19
that just shows you the details of the note.
5:22
We're going to call this the NoteDetailView and it will inherit from the Backbone.view,
5:24
just like we've done before.
5:28
Now, since this view is going to be dynamically generated
5:30
instead of attached to an existing tag on our page,
5:33
we need to define what kind of tag we're going to base this view on
5:36
so we're going to say tagName is "DIV".
5:39
You remember, in our NoteListItem, we used an li because we needed an li tag
5:42
for our list, but now we need a div tag to create a page.
5:47
The next thing we're going to do is define a template for it,
5:51
just like we did with our NoteListItem,
5:54
and we're just going to do it the same way using the _.template()
5:57
and grab the contents of "#note-detail-template"
6:00
which we'll define in a moment in our index.html page.
6:04
And now we get to our initializer.
6:09
We're going to have our bindAll to make sure our render is called correctly
6:11
with the correct this,
6:15
and render is the function that will actually update the contents of our view
6:17
with the data that needs to be displayed.
6:21
And also in our initializer, there are a couple of things we need to do.
6:25
Since the view will automatically create the div for us,
6:29
we are going to need to set some attributes on this div
6:32
to make it act like a jQuery Mobile page.
6:36
So what we're going to do is we're going to jQueryify our $(this.el)
6:39
and we're going to use the attr method, which allows us to set attributes on an HTML tag.
6:44
So the first thing we're going to do is set the attribute "data-role" to "page",
6:51
and we've seen this before; this just says to jQuery Mobile that this should act like a page.
6:56
Then we also want to set the id, and this is important.
7:02
This is how jQuery Mobile is going to be able to locate the div that we need to load
7:06
when we click on a note in the list view.
7:11
So to construct the id, we're just going to take "note_" = this.model.id
7:13
so this should match any of the links to the specific notes in our page.
7:21
Finally, we're going to bind the change event in this.model
7:27
to render the page, so this.render.
7:31
And now we get down to our render function, which is a lot like our previous view.
7:34
We're just going to wrap jQuery around this element $(this.el)
7:39
and then we're going to set the HTML to render (this.template
7:43
and we'll pass the note into that template.
7:47
(this.template({note: this.model}));
7:51
So the next thing we need to do is actually define the template in our HTML file.
7:54
I've just pasted in the template for our NoteDetailView.
8:05
I've passed it into a script tag with a type of "text/template"
8:10
just like we did for our previous template,
8:14
and given it the id of "note-detail-template"
8:16
which is what our view code is expecting to find.
8:19
The code for this template is going to be what's inside of our div
8:22
with the data-role of page.
8:26
We're not going to have the outer div because that's automatically generated by our view,
8:29
so this is what goes inside of a div with the data-role of page.
8:33
So we're going to have a header, which is defined right here,
8:38
and so we have a div with a data-role="header".
8:42
We're going to put in our own Back button linked to the homepage
8:46
and you can see we have the data-role button here,
8:51
we have the data-icon of "arrow-l" and a data-rel of "back"
8:53
so this is how we've created our manual Back buttons before.
8:57
It just has the text of Back.
9:01
Then, here in our h1 is where we have our dynamic bit
9:05
which is served by the template.
9:08
So we have this note object which is our model instance,
9:11
and to get the title, we'll call .get("title"),
9:14
and this will be replaced into the contents of our h1 tag right here.
9:18
After our header, we'll have the div with the data-role of "content"
9:25
and just for now, I'm going to get the body from our note
9:29
and just place it into the content.
9:32
So now we have the view code written and our templates written.
9:35
All we need to do is go back to our application code and instantiate the actual views
9:39
so our pages will be generated.
9:44
So I'm about to paste in our code to instantiate our NoteDetailList view.
9:50
And here's our code: we're going to assign to App.views.notes = new NoteDetailList({
10:02
and we're going to pass into that the collection of App.collections.all_notes
10:09
which is the same collection we passed to our alphabetical note list in the previous view,
10:15
so both of these should stay in sync.
10:22
So let's see if this is going to work in our browser.
10:25
So I'm just going to refresh this.
10:29
We didn't get any syntax errors, which is great,
10:31
so we'll see what happens when we click on My Note.
10:34
Awesome! So now we've navigated to note_10b3
10:37
and we have the title of My Note,
10:43
and we can see that there's no content.
10:45
We should be able to go back and try another note.
10:47
Cool, let's just take a look at a few more.
10:51
Awesome.
10:56
So now, it looks like we're able to view our notes, go back and forth,
10:57
and let's go ahead and try to create a New Note.
11:02
New Page Test
11:08
This is the content.
11:11
And when we save this out,
11:16
we should be able to go to All Notes.
11:19
We'll see New Page Test
11:24
and This is the content.
11:28
Now, the final test is to see if the actual note can be bookmarked and refreshed,
11:30
so to test this out, I'm on the note page, and if I refresh it,
11:35
it looks like it comes back.
11:40
It looks like it loads up just fine.
11:42
If you're having a little bit of trouble understanding what's going on here,
11:45
let's take a look at what this page looks like without jQuery Mobile loaded.
11:49
So let's go back here
11:53
and let's go back to our index.html file,
11:56
and what I'm going to do is I'm just going to mess up this URL
12:00
so that it does not load jQuery Mobile.
12:04
So if we refresh, we can see what we have here is our homepage,
12:07
which is just a list to All Notes and Nearest Notes.
12:11
We have our New Note page down here.
12:16
We have our All Notes page, and this list is generated by Backbone.js,
12:21
so every time we add a new note, it will be appended to this list.
12:26
And now, what we have here is inside of this div--if we inspect it here,
12:31
let's take a look here--
12:37
we can see that we have the div with the id of NoteDetailList
12:47
and then, inside of that are all of our different note pages
12:52
all with the correct ids, so this list is being dynamically generated by Backbone as well.
12:55
We should actually be able to create a new note without the help of jQuery Mobile,
13:03
so let's see what happens here.
13:07
We might get an error, but let's see what happens.
13:09
So let's just do a Plain Note Test
13:13
and Some content.
13:18
Hopefully, we should be able to save this,
13:20
and we can see there was a little update that happened here.
13:23
Just like Backbone added a Plain Note Test here,
13:30
it also went down here and created the note for us here,
13:35
and all of this is going to be turned into jQuery Mobile
13:40
as soon as it's loaded.
13:44
So let's go ahead and fix this and refresh,
13:46
and we can see that it still works.
13:50
We can go back to our Plain Note Test and see that the data is persisted.
13:54
Let's take a look at it in the mobile.
13:59
I'm going to go ahead and change this and I'm going to go ahead and refresh.
14:02
We see we only have one note on our mobile app
14:08
and if we click it, we can see we have our First Mobile Note and we have some text.
14:11
We can go back all the way to the home.
14:16
Let's do a Second Note
14:19
With Some Awesome Text
14:21
and let's save it out.
14:31
It flies away, we click on All Notes, and we get our Second Note and we can click to it.
14:33
We can even refresh from this page,
14:40
so we can go to Second Note and we can look and see that all of our text is here,
14:44
and we can even refresh the page and see that it still works.
14:48
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