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 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