This course has been updated! We now recommend you take the Deep JavaScript Foundations, v3 course.
Transcript from the "Challenge 4: Solution" Lesson
[00:00:00]
>> Kyle Simpson: Lets talk about the solution to exercise four. I said, the goal was to add a feature which was the click to expand. If I open this up.
>> Kyle Simpson: And I run the fixed version of it. Just so we are aware of what it's supposed to do. If I were to say, I worked on some really tough things today, and then say I spent 75 minutes doing that.
[00:00:32] You'll notice that it has truncated. Let me zoom that in just a smidge, so it's easier to see. You'll notice it's truncated it, but if I click on it, it expands it. So that was the simple use case that we were supposed to implement. There are of course multiple ways to do that, and perhaps even better ways to do that than with closure, but the intent here was to illustrate the usage of closure.
[00:00:58] So what we did was, we wanted to find where that clicking would be set up, and it should be set up in the place where you create that entry each time the work is added, which is the function addWorkToProject. So in this function, we're creating the data, and then calling addWorkEntryToList.
[00:01:21] Sorry, it'll be addWorkEntryToList where we're dealing with the DOM. So in this function, we have the work entry data which would include the lengthened description. But we wanna go ahead and set up a click handler for that element. And that click handler, if we do it as an inline function, it's going to be able to close over that work entry data variable, and therefore be able to use that value even if click it at a later time cuz, it will close at run.
[00:01:51] So if we scroll to the solution here,
>> Kyle Simpson: Actually I guess I move it to setup work description, since that one makes more sense. So in the to do comment here, that's where we wanna add in our solution. So, we already were adding the class shortened, in the case where the length was already longer than it should've been.
[00:02:18] So we already were adding the class shortened which is the thing that puts a little mouse cursor over it, to let you know that it's clickable. Now we just need to add a click handler. So just the same way we did the click handler for the button to add the work, here we're adding a click handler to the actual description dom element.
[00:02:37] And that on-click handler, you'll notice that I want to be able to unbind that event handler. So I gave that function expression a name. So that I have that name to self reference to use inside of myself. Technically, jQuery doesn't require that, some frameworks can remember it. And they know what to remove and some don't.
[00:02:58] But I think it's a good best practice, to specifically say this is the handler I wanna remove. [COUGH] And the important part here is that we are closing over the work entry data variable, we're closing over that because we've been provided that work entry data as a parameter.
[00:03:14] So that's a variable in our scope, and this interfunction closes over that. So even though it's gonna run it a later time and theoretically that scope should have gone away, that variable in particular would have been preserved through closure for us to use later.
>> Kyle Simpson: Very simple illustration using closure to our advantage.