Event API Review

[00:00:00]
>> We introduced here the auto-inserted object, the event object as it was described, that captures all the info about the user's action. So that our handle function can actually work on a list of elements, sorry, a list in the JavaScript, sorry, can work on our DOM elements where we don't have named accessor objects for them in JavaScript.

[00:00:32]
Instead, they're going to provide via this auto inserted argument, this event object, and as long as we've written our parameter e. If we didn't put an e there, we wouldn't be able to then access this auto-inserted argument. I guess it would still be parsed with the function, we'd have a label for it inside.

[00:00:49]
As it was, we do, and therefore we can get the target property of it, which is a link to the element on which the input happened. Therefore, we could grab our value Li and use it to update our data. And because we described in our createVDOM array the three elements and how they depend on underlying state, and we can make it more flexible.

[00:01:13]
We can certainly say the div could be conditional on the underlying data as well, as opposed to just the contents here. But having done that, when we change our data, because updateDOM will just run again and turn that data into a new instance, a new data specific to this new data Li version of this JavaScript array and wipe the previous version.

[00:01:39]
It seems a bit wasteful, maybe we could have used that and made a comparison to it to see what actually changed. And then it will map over [SOUND] and convert each element into DOM elements. [SOUND] And get array in JavaScript of access objects for it, such that we can then use those elems to use those accessor objects, to have the body in the DOM have its children, its sub-elements, replaced with our new linked elements.

[00:02:12]
So we wipe the previous ones and the user just sees the change across their entire view, including the bit they were typing. We're not thinking about that anymore. We're long past worrying about the user's content being typed, that they're typing being the content they actually see. No, we're very much just seeing that as a submission to handle and then update data from which we then run through one, data is changed.

[00:02:44]
Two, recreate the representation of how that data will look on the entire page. Any conditions described in the VDOM as to what will be displayed, and then produce at, just that phrase was a bit all over. Any conditions, any differences for how that data will be displayed, will be determined in this description lines 4 through 6 of what the relationship between the underlying data and what gets displayed looks like.

[00:03:16]
And that then is used in the mapping where we convert each of those elements into actual DOM elements that then are appended and the display updates. Woo, excellent people. That's how,
>> [APPLAUSE]
>> Okay that's the all of you. So we now have element flexible code be, well, let's just see what the summary says it.

[00:03:38]
With our new element flexible code, we can compose our code, adding to our list of arrays each new element we want to see in order on our page. We can add four more. They'll all show up. That's kinda cool. They'll show up on the page exactly as they place.

[00:03:50]
If we inserted a new element here, let's say div, I don't know something else. And of course, our convert function would have to come far more versatile to handle many different types of HTML or, sorry, HTML, DOM elements. DOM elements I guess are often called HTML, DOM elements, but we could do that with our convert function becoming more sophisticated.

[00:04:10]
We get semi visual coding.