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
Well done!
You have completed HTML5 Mobile Web Applications!
You have completed HTML5 Mobile Web Applications!
Preview
In this video we introduce Backbone Views and create a view to handle our new note form.
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 the Form View]
0:02
[Jim Hoskins] So now, by playing around with the JavaScript console,
0:06
we've seen how we can use models to save information into our localStorage database
0:09
and now, our next step is we want to actually connect our new form
0:14
to code that will actually instantiate a New Note object and save it to the database.
0:19
So what we want to do is we want to take our new form--
0:24
and let me just close the JavaScript console here because we don't need it--
0:28
and we want to be able to take the Title and Body information
0:31
when we click the Save button
0:34
and then run the code that we saw before when we instantiate a new object and Save it.
0:36
So let's see how we can make that happen.
0:41
Now, one of the ways we could organize this is using what we call a view,
0:44
and a view is a concept in our code
0:47
that represents some part of our page that we can see.
0:51
So for instance, we could use a view to represent this New Note form,
0:58
and my view or piece of code would handle any events
1:02
like changing the Title or Body fields, or more importantly,
1:06
when we click the Save button.
1:09
So what we're going to do is use the View that's included with Backbone
1:10
to create our own custom View to represent this form.
1:15
We'll be using Views all throughout our application to represent different things
1:18
like forms, list items, or even lists of pages
1:21
that will need to be dynamically managed any time we change information in our database.
1:25
So let's go back to our code and see how we can create a new View.
1:32
So here I am in my code.
1:38
We have our Note model and I'll just put a comment up here:
1:40
this is our // Note Model
1:46
and now this is going to be pretty much our only model.
1:51
So down here is where I'm going to start creating Views--
1:53
// Views
1:56
--and we'll organize this a little bit differently later.
1:58
So the way we create a new view is a lot how we create a model.
2:02
We're going to extend a Backbone class and add the changes that we need,
2:06
so I'm going to call this the var NewFormView =
2:11
I'm going to create this by extending the Backbone.View class
2:18
and we use the .extend({ method
2:23
and in this object is where we'll define the properties and methods
2:26
that defines our Views behavior.
2:29
So one of the cool things about Backbone Views
2:32
is that they provide us an easy way to listen for events on our View
2:34
and to delegate them to methods that are also defined in our View.
2:39
When we have a View, we need it to be associated
2:44
with a particular element on our page.
2:46
In different instances, this will be handled different ways.
2:49
One way to do that is to allow the View code to instantiate its own element
2:52
that we will then add into the page,
2:55
but in other cases, we may want to attach our view to an element
2:57
that we defined in the markup of our page,
3:01
which is what we want to do now.
3:03
Now, in order to do that, what we can do is in our object here, we can define the el,
3:06
which is el, or short for "element,"
3:10
and this will define what the View uses as its element in the page.
3:12
Now, we can use jQuery to grab our form
3:16
and give it the scope, so this new View form
3:19
will be attached to a particular element.
3:23
Let's go back to our code to find out exactly what that is.
3:25
And here, we want it to attach to this div,
3:30
which has an id of new, so I'll use the jQuery id selector of "new"
3:33
and so now, our new form view will be permanently attached to that element.
3:39
We're going to change this a little bit later when we reorganize our code
3:43
to be a little more flexible, but this is one way you can define the element
3:47
that a View is attached to.
3:50
One of the other properties we can add into our extension here
3:52
is a special property called events: and this is going to be an object.
3:56
The keys in this object are special strings that define an event
4:00
and on what elements that event is called,
4:05
and then the value is going to be the name of a method we want to be invoked
4:08
when that condition is met.
4:11
So inside of our div here, one thing we want to look for
4:14
is the submission of our form,
4:17
so all of this code is contained within our View
4:19
and we have a form inside of here, and anytime we submit this form,
4:21
we want the view method to be called that will actually create our New Note.
4:25
So to do this, we're going to create the string that will catch that event,
4:30
so in any case, when we want to submit--so this is the type of event we want to catch
4:35
and then after the first space is the selector which defines what elements
4:39
that the event will come from.
4:43
So in our case, any time we submit a form,
4:45
"submit form";
4:48
then the value is going to be the name of a method,
4:50
and we'll call our method "createNote".
4:53
Now we can define multiple events and multiple methods to be called on them.
4:56
So for instance, if we wanted to say something like
5:00
any time we click on something with the class "new"
5:03
we would say "click
5:07
and then give it the selector .new"
5:09
and then the name of the method that we would want to invoke,
5:11
so "ourMethod".
5:14
So we don't actually need this, but you can define multiple event delegations
5:17
by simply just adding it to this list.
5:22
So the next thing we actually want to do is create our createNote method
5:25
to actually handle it,
5:28
so after we define our events, I'll put in another comma
5:32
and we'll define the method called createNote:
5:35
and this will be a function()
5:38
and this function will accept an event because it's going to be invoked
5:41
as a jQuery event handler so the event will be passed to it
5:44
and this will be like a normal jQuery event listener.
5:48
So here's where we actually want to do all of the hard work of saving our information.
5:52
Now, what we need to do is we need to get all of the information out of the form itself
5:58
and turn it into an object where the keys and values,
6:04
so we ultimately want something that says
6:07
{body: "Something",
6:10
and the title "something"}
6:13
and we want to assign it to a variable called attributes, so various attrs = .
6:17
So what we're going to do is we're actually going to create another method in our View
6:23
that will actually do the work of extracting that information and returning this type of object.
6:26
So instead of hard-coding an object like this,
6:31
we'll say this.getAttributes
6:34
and let's go ahead and just put a placeholder function here.
6:39
So getAttributes: function(){
6:43
and we'll return something in there.
6:48
So we also wanted to define another variable we'll call note,
6:51
and this will be the actual instance of a note that we're going to create,
6:55
so to do this, all we need to do is note = new Note();.
6:59
So then, what we're going to do with that is we're going to say
7:07
note.set
7:10
and pass in the (attrs)
7:12
which is our Title and Body values,
7:14
and they'll actually set all of the properties on that note.
7:17
And finally, we ant to do note.save();
7:22
and this will actually save our note into our local database for us to use later.
7:28
So we need to get our attributes from our form,
7:34
and we can do that with a little bit of jQuery magic.
7:36
So basically, our getAttributes: function(){ just needs to return an object,
7:39
so we'll do return
7:42
and we'll return { object, and for the title:
7:46
we're going to do this
7:50
and this refers to our View instance.
7:53
And on our View, there's a special method called the $ method
7:55
which actually allows you to execute jQuery functions within the scope of our View.
8:01
The View has a special $ function which allows you to return a jQuery-like object
8:05
but that's scoped specifically to your View.
8:11
So I want to use this to search for an item inside of our form
8:13
with the _name=title]"}
8:18
So this is a CSS selector looking for an element
8:20
who has the attribute name, which is equal to title
8:23
and we're scoping it within the form.
8:26
That's not really necessary, but right now,
8:29
we just want to make sure we're grabbing the most specific value that makes sense for us.
8:31
There's a lot of different ways we could select that specific input,
8:35
but this will work for our purposes.
8:38
So once we have the actual title field, we just want to return the value
8:41
which with jQuery is done with the val call.
8:45
For the body, we can do pretty much the same thing and just copy and paste it
8:48
and just change the name from title to body
8:51
and make sure that the key is body.
8:54
So now, they should return an object with a title and body
8:58
based on the form, and we get those into our attributes here,
9:01
we instantiate a new note,
9:05
we set the values using the attributes object,
9:08
and then we save it out.
9:10
Now, the last thing we need to do is we need to actually instantiate
9:11
our new form View.
9:15
Right now with our code, we've just defined a class,
9:17
but it's no good until we actually instantiate it.
9:19
So towards the bottom here is where I'm actually going to do
9:22
all of our application instantiation.
9:25
So we have our app object, which will allow us to store all of our meaningful Views
9:27
and models and stuff into an object which we will later return
9:32
so we have access to all of the parts of our application.
9:36
So when I instantiate my new NewFormView[)
9:39
what I'm going to do is I'm going to assign it to App.views.new_Form.
9:46
Now, this may not be immediately necessary,
9:55
but it's great any time we instantiate a view to have a way to access it
9:57
from outside of our application.
10:00
So here, we've now instantiated a newFormView
10:02
and by default, it will send its element
10:05
to the element with the id of new.
10:08
So now if we save it out, we have our App.views,
10:10
and now we're assigned to App.Views.new_Form
10:14
our NewFormView instance.
10:17
So let's go to our code and we'll refresh.
10:19
Let's create a New Note, and we'll call it First Title.
10:22
And actually, let's open up our JavaScript console
10:25
to make sure we know what's going on.
10:28
And now, I'm going to add First Body.
10:31
So when we save it out, let's see what happens.
10:35
And we saved our note out and we should see a new note appear
10:38
in our note's localStorage here.
10:43
Now, if we refresh and we take a look, it doesn't look like we have a new note in here.
10:46
It looks like--if we take a look--we have our title of My Note and no content,
10:51
which we did manually before, but we don't have a new one,
10:55
so it doesn't look like our code saved out properly.
10:59
We can refresh--yeah. It doesn't look like it works.
11:02
So now we have to go and figure out exactly what happened.
11:05
It might have been a silly mistake on my part,
11:08
but this is something that we run into a lot.
11:10
The best break point to get into is to see if our createNote
11:14
even gets called when we submit our form,
11:18
so one thing we can do is to check if createNote gets called
11:21
and we're just going to add in a console.log() call
11:24
and what this will do is output a little bit of text into our JavaScript console
11:29
when this code is executed.
11:33
So we''ll just say "createNote called"
11:35
and let's see if that works.
11:39
If we don't get this when we submit our form; it looks like something's wrong
11:41
and createNote is not being called, then we debug a little higher up.
11:44
So let's go ahead and refresh,
11:49
create a New Note, Second Try,
11:52
and we'll add a Body in there,
11:57
and let's save it out
12:02
and we're not getting any console here, so what could be the problem?
12:04
We have a NewFormView,
12:07
we have our element, which should work.
12:09
Let's make sure we actually ran this code App = new NewFormView();
12:13
so let's take a look in our console here. Let's see.
12:18
NotesApp.views.new_form
12:22
and it looks like we do have the new_form view instantiated
12:32
and we'll take a look at the options.
12:38
It doesn't look like we have a whole lot of information here
12:40
as to what's going on,
12:44
so let's check and make sure we have a div with an id="new".
12:46
So now, if we look at what's going on here,
12:51
we see that our code is executing right away;
12:54
we're not waiting for the document to be ready to load.
12:58
So when this code is actually parsed and we run element and run this jQuery "#new" call,
13:02
our element has not been created on the page.
13:06
So what we could do is we could defer all of this
13:10
until after the page is ready.
13:13
What I'm actually going to do is remove this element option here,
13:15
and I'm going to actually move it into the initializer of our instance of our NewForm
13:19
and we'll just pass it an object here, and we can pass the element,
13:26
just like we did in our class definition.
13:30
Now, this doesn't solve our problem,
13:33
but it allows us to use the jQuery $(document).ready(function)
13:36
which will defer all of this code until our page is ready to be used.
13:42
So now, within this scope, our new element should exist
13:48
and we should be able to initialize it.
13:51
Now, this might cause us some problems later
13:54
when we try to dynamically create things with Backbone
13:56
and interact with jQuery Mobile,
13:59
but let's see if this gets us as far as we need to right now.
14:02
So if we refresh and we hit New,
14:05
and let's load up our localStorage here, just so we can see what we have.
14:11
We'll say Form Title and Form Body and we save it,
14:19
we've got createNote called.
14:27
And if we take a look here in our localStorage when we refresh,
14:29
we did get another element here with the id of E1789 and so on.
14:32
And if we take a look at the content,
14:37
it doesn't look like we can actually see it, but what we could do is
14:41
localStorage.getItem("notes")
14:45
We can see that there's a new object here.
14:53
It has a title of "Note @ Mar 16" and the body of "No Content"
14:56
so while it looks like it did create a new note,
15:01
we did not get the attribute set on the note,
15:04
so let's take a look at why that might be.
15:08
It was a simple mistype on my part, so I just did this.getAttributes,
15:15
but I need to actually call the method (),
15:19
so now if we save that out and we refresh our page one more time--
15:21
so now if we type in Third Note and we'll say Third Note Body here, and we save it,
15:25
it looks like we get createNote called.
15:35
If we refresh and if we call localStorage.getItem("notes")
15:37
and we inspect it, it looks like we do have a third item now of Third Note
15:47
with a body of Third Note Body.
15:50
Cool, so we're able to get the information out of the form
15:53
and save an object into our localStorage,
15:56
which will persist between different page loads.
15:58
Now, our next step is obviously to take that information from our database
16:01
and display it as a list of notes as well as details used for those notes.
16:05
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