The three places that I implemented this change were 1,
the index.html file where the template was.
2, To do view.js.
And lastly, todo.js, the place where we store all of our data in our model.
So I had to figure this one out too.
So, here's the thought processes I went through.
So first off, I knew I needed to add a priority button
in the same place as the other button, our Delete button and our Edit button.
So I had to remember where that was.
Sure enough, it was in our template code in our item template in
our index.HTML file.
So I'm going to go ahead and copy the Edit button, and I'm going to paste it,
and I'm give it a class of priority button.
Before I do anything else, I'm going to go ahead and test this.
Sure enough, in the browser, it works just fine.
When you roll over it, there's a little exclamation point,
and when you click on it, nothing really happens.
Of course, that's not unexpected; we haven't wired it up yet.
So, now we have to remember where did we wire up those other buttons?
That's right, it was in our Todoview.js.
If I scroll down just a teeny bit, it was in this events object literal.
I can put it anywhere I want in this entire object literal, but
I'll go ahead and put it right here.
So what's the event?
The event is going to be a click because when I click on the priority button,
I want something to happen.
How do I get to the button?
.priority button, and what's the functionality?
Well, gosh, I do not know, actually.
There's no function down here, that toggles the priority of a button, and
that's of course because it's a new feature that we're creating.
So it's up to us to define this.
What's something that looks similar?
Well, we're toggling the priority of a button,
it turns out we already have a function called toggle completed.
Let's take a moment and look and
see what that looks like, and that's just down below here.
Toggle completed is a function,
which says this .model the thing that we clicked on's model .toggle.
So, because we're on this wild goose chase we have to go and
see what that looks like.
Now where are we going to find a toggle method on a model?
My guess is it would be on the to do model, in to do.js.
So, sure enough, our to do dot JS file is not very big.
It's just got this defaults thing and
this toggle thing, and the toggle thing is exactly what we're looking for.
It toggles the completed state of the to do item.
How does it do that?
It says this dot save, completed is not this.get completed.
Now, this is the kind of stuff that we don't necessarily know because we
don't know Backbone very well, and it would be great to take a look and
see what this.save does and how it works, and this.get and how it works.
So if I were you, I would go ahead and look them up.
I'm not going to look them up in this solution video, but, suffice it to say,
this dot save takes in a property here with a value and
the value gets saved to the model.
So, this dot save completed changes the completed value of our Todo.
And what does it set it to?
It sets it to not this dot get completed.
So, if this dot get completed returns true we're setting it to false.
If it returns false we're setting it to not false, or true.
This is just basically a toggle, which is exactly why it's called toggle.
If completed is true it sets it to false and if it's false it sets it to
true and that's exactly how we want our priority thing to work.
So for now I'm going to go ahead and do a very similar kind of a thing here.
I've got toggle, and
I'm also going to make a new thing that toggles the priority.
So, I've gotten this far.
What do I want to save it as?
I'll say priority.
Priority is going to be the opposite of this.get('priority').
Now, if I poke around the documentation for backbone models I'll also
find information on this guy right here, that's the defaults.
When you make a new to do, what are its defaults?
It has a title of nothing, it has a completed value of false, and
I also should add something for the priority.
I'll say priority is false.
Now I have something called togglePriority on our Backbone Model.
So now when I create to do items they don't just have a completed state of
false, they now always have a priority of false.
And they also have a function to toggle the priority.
And that's exactly what we want to make use of over here in our view.
So instead of toggle completed function this.model.toggle.
I'm going to do the exact same thing but with toggle priority.
I'm going to go ahead and
save this, now one thing you'll notice is I'm being tofu even in my comment.
Toggle the "priority", and you'll notice I wrote this exactly the same way
because in this case, the tildes on either side are saying this is code,
and then the quotes are saying we're talking about a string.
Same with editing down here in this comment, and so,
of course, my comment is going to look exactly the same.
I am missing a comma here, I'd better not leave that off.
If I did leave that off, you'll find errors in the console,
which is always a good place to check when your application doesn't work, and
it would say, hey, something's wrong here around line 73.
All right, so now I've got a toggle priority.
I've got a toggle priority on the model, which I'm using right here.
And let's go ahead and save it all, and
refresh, sure enough, it does not work because I haven't finished wiring it up.
The thing I forgot was here in events.
I'm saying when I click on the priority button what happens?
Nothing yet.
I need to say toggle priority.
That's the name of the function or
the method on the view down here that I just made.
And that will toggle the priority of whatever elements we're talking about.
Whatever to-do we're talking about.
Now if I go and I refresh and I click, still nothing's quite working.
Now why would that be?
I'm setting a priority state on the model anytime I click on the button.
So, either I did something wrong before, or I'm doing it all right,
but I'm just not seeing it.
As it turns out, the thing that I forgot is I forgot to actually show it here.
That would go over here, in index that HTML.
Remember that the CSS was written that way you would add a class
of priority on the LI.
So where in this LI template do we see the actual LI?
Hm.
Well, if we look around, we don't see it.
It's kind of of a problem, huh?
So, maybe this wasn't the right place to look, for how to add the LI.
So we've got the template, what else is responsible for rendering the elements?
Let's take a look at the view, again.
Our to do view, again.
Once again, we're on this wild goose chase and we have to be a detective.
Now once again, I also want to remind you that this is just my process,
this is how I would go about trying to figure this out
assuming that I hadn't done this before and I didn't know backbone.js.
If I had to work on this code base for months, I would learn Backbone.
But until then, being a detective can be useful.
So we've got our events thing, and that's for the actual click.
How is it rendered, again?
Let's scroll down and see if we can find anything interesting.
Well, here is render, that seems like exactly the kind of
function we'd be looking for, so let's see what happens.
There's this code here, we're going to ignore it because if you read this
comment, this is just for fixing a little bit of a backbone local storage bug.
So this isn't really interesting to the functionality of the application.
This is the meat of it.
It looks like it's taking this element, the actual elements behind this, the LI.
And it's setting the HTML to, the rendered template.
It's also telling this element to toggle, to turn on or
off the class if completed whenever this is true or false.
Now it's also, wait, wait a second, wait a second.
Toggle class.
That seems like something we might want to do.
So, what is this line doing again?
It's setting a class of completed.
If this.model.get completed is true.
Hm, so, if this model says that
it's been a completed event, it adds a class of completed.
We want to do exactly that, but for our priority button Eureka.
So, let's see if this works, this.$el.
So that's the element itself .toggleClass priority, and it'll set that class of
priority on, or enable it, if this .model.get of priority is true.
Now let's see if that works.
Let's hop back into our browser and try this one more time.
I'm going to uncheck these, and if we hit the exclamation mark,
sure enough, eureka, it works.
Now we can prioritize some of these.
We'll say add a new feature's really important.
And then as I check them off,
the priority red goes away, and here's our add a new feature.
Pat yourself on the back, we just added this feature.
And especially pat yourself on the back if you came to this kind of
a solution on your own, without looking at the solution video.
Awesome work.
Now, if you did it, I would recommend, even though you know the solution now,
going back and trying to do this by yourself, without referencing my solution.
Do remember that the whole point is for you to be able to do this on your own.
To be a detective on your own, and to implement functionality like tofu.
So your code looks like it's always been there.
Good work.