So, in the last video we took the data out of the HTML and we got it into a JavaScript usable variable so we can do programmatic things with it. Now in this video we're going to walk the DOM and update it based on that data. So expressions like xtext will actually update the span to have a text value of count. Now there's a bunch of different ways that we can accomplish this DOM refreshing problem. Basically we need some sort of loop where we can get all of the elements in the component and inside each iteration of the loop we check if xtext exists and then evaluate what it is and update the value of that element. So there's a bunch of different ways you can do it. We can make a function called refreshDOM.

So there's a bunch of different ways you can do it. We can make a function called refreshDOM. We're going to need this either way. And we could do something like document.querySelectorAll(xtext). And then for each and then loop through each of those elements and update them as we go. Now document.querySelector actually breaks down for this kind of an operation. Like what happens if xtext accepts a modifier? Like in Alpine there's things like @click.window. Well you'd have to, like you can't do this with document.querySelector. So anyway there's a bunch of things that make it a little bit tough and querySelector is

walk through each element and then there would be some callback so that you could hook into each element in the iteration. So this is going to be the most heady part of this whole series and it's the most heady part of Alpine or Livewire period. I swear it'll be over before you know it and I'll try to spell it out as plainly as possible but we're going to create a DOM tree walker. And reiterate that one more time what that means is really we want something that can give us some sort of loop that'll execute on each element as it walks through recursively. So let's write a function called walkDOM. First we'll kind of describe its usage how we want to use it then we'll implement it.

So let's write a function called walkDOM. First we'll kind of describe its usage how we want to use it then we'll implement it. So walkDOM and we're going to start with the root element. That's the first argument and the second one is going to be a callback kind of like a forEach or something where it's going to give us the current element that it's walking and now each time that it walks we get this element. So we could do something like console.log(l.outerHTML) and now if we implement walkDOM properly it'll start here and echo out all of this. And it'll get to this button and just echo out that HTML then this then this and just to make things a little bit more interesting let's add another div and then another span

When I first encountered the problem I wanted to do this on my own so I spent a ton of time creating my own DOM walker and it was huge and gnarly and it was garbage and then I looked up how to write a DOM walker and it's such a simple function this this function is basically like six lines. So here we go. First let's get these parameters in there. We accept an element and a callback which we saw right up here. We walk DOM we accept an element and a callback. Great. So the first thing we're going to do is actually use the callback we're going to call it with

Great. So the first thing we're going to do is actually use the callback we're going to call it with the current element. All right. Now the next thing is we're going to make L equal L.firstElementChild. So firstElementChild is actually a available DOM API thing like every browser has access to this firstElementChild which is just going to give you the firstElementChild of the current element. OK. Let's keep going.

But it's not recursive it doesn't actually do anything recursively. So this is the big question when you're writing a recursive function is where do you put the recursion and rather than you know wrapping our heads around it and going really deep on it. I'm just going to show you you put it right here. So callback here we go. So if you think about it we're going to start at the root. We execute this callback. OK. Now we get the first child while L. So if there's a first child this is going to work

Congratulations. All right. So now let's do some easier stuff. Now that we have this walkDOM callback we can do whatever logic we want to detect if an element has some directive like x-text and then update the span based on that. So let's get rid of this here. OK. And now inside of refreshDOM let's say if L has attribute x OK so if it has that attribute then set L's inner text to foo for now just so we can see if this thing works refresh. And there we go.

then set L's inner text to foo for now just so we can see if this thing works refresh. And there we go. It says foo. So it walked through and it found the element with an X text attribute and it updated its inner text. But what we wanted to do is actually evaluate count, the value of count which right now is zero. So we can do that but we're going to need to use that eval like we had before. So let's just do this how we would think to do it. We're going to need eval so eval and then our back ticks and then our parentheses. Now we can interpolate and then inside of here we need the expression we need the value.

We're going to need eval so eval and then our back ticks and then our parentheses. Now we can interpolate and then inside of here we need the expression we need the value of $x text which is actually app()->get('x_text') which is a little bit yucky to see in line there. So I'm going to rip that out and we'll make this a separate variable. So let expression equals OK and now we'll say expression great. So let's just see if this works and it doesn't work. Why does it not work. Reference error count is not defined. So this is actually what we would expect.

Reference error count is not defined. So this is actually what we would expect. This is the last deep part of this episode where we're going to look at something that Vue JS uses internally and we're going to use the same thing to do a little bit of magic. It's a lesser known JavaScript statement you've probably never heard of but I'll demonstrate. So let's say we have some data. So right now data is data count is zero. All right. So when we eval we're just evaluating count. So it's almost as if I just type count and then it says uncaught reference error count

So when we eval we're just evaluating count. So it's almost as if I just type count and then it says uncaught reference error count is not defined because we haven't defined it. What I really am looking for is data.count right. Because count is a property of the data object. So let's just see if I actually do this data.count and refresh. So it actually works. So that's fine. But this is ugly. And taking a cue from Vue.js you assume that if you pass something in here it's a property.

quick. So the with statement extends the scope chain for a statement. And then here's a syntax with expression statement. So I'll show it to you. So right now we have data right. count is zero. All right. And now we want to be able to just type count and for it to evaluate. So let's use with data. And now inside of here we can just do count.

So let's use with with data. And now inside of here we can just do count. So let's actually console.log that out. OK. console.log count. And there it is zero. And if we do data.count equals three with data console.log count three. OK. So if you were following this this is the magic piece of the puzzle to allow us to not have to type data dot.

So if you were following this this is the magic piece of the puzzle to allow us to not have to type data.. So here we go. We're going to say with data OK and close that up and hopefully that's enough to get us through. All right. And that's it. Now we have our zero. We're totally good. We have a refreshDOM function that walks the DOM and updates things as it finds them.

We're totally good. We have a refreshDOM function that walks the DOM and updates things as it finds them. So let's test it out. Let's say data.count equals 4 and then we'll execute refreshDOM. There we go. Now we have it updated. So the next step for us is going to be to make it reactive. So right now we manually have to refresh the DOM. We want a system where when data updates the whole thing automatically refreshes the DOM.

We want a system where when the data updates the whole thing automatically refreshes the DOM. That would be reactivity that would make our little Alpine reactive.