We just built up a simple reactive data source that showed you how computations relate to reactive data source and a function that the reactive data source wants to re-run. It turns out that we don't even have to write all that boilerplate code because there's an object that we get in the core framework called a dependency that does exactly that. Now, I find this description to be a bit confusing, so let's just go and take a look at how to use the dependency directly by updating our code.
To show you how this works, let's start off with a simple example. I'm going to comment out this call to nameGet and let's create our first dependency. I'll just make the global variable called Dep for dependency for short. Dependency, there we go.
Now, what we can do with the dependency is, inside of a function that's running inside of a computation, we can call dep.depend. And so a dependency allows us to track multiple computations. And then we can call the changed function of the dependency to change all of those computations at any point in the future. So let's look at in the console here. If I call depChanged, notice it reruns the function again and again.
So we can use this new data structure instead of writing this code ourselves up in our reactive data source. So up in the object, let's create another property here called Dep and set it equal to a new Tracker.dependency. And we won't need to store the computations directly ourselves anymore, so I'll just go ahead and delete that.
Now, inside of the set function, actually, let's go down and do the get function first. I can get rid of all of this boilerplate and instead, just call the depend method of our Tracker dependency. You see how much code that saves us, just a couple lines here, but easy to make a mistake and it's better to use this method.
Now, there's a lot more code going on here in a set function. We can get rid of all of this and just call the change method of our dependency. Once the code reloads over in the browser, we can try this out. So I'll call the set function and we'll set the name to two, and then to three, and so on, and you can see that it works just like it did before.
But let's go in and inspect this name property again. And for some reason, it's not available. Let's refresh. There we go. And take a look at the Tracker dependency object. It's pretty simple. It has a property called dependencebyID that looks pretty similar to what we had before.
So it's just an object of computation stored by ID. And then in the prototype, you can see the functions that are available to us. We can call changed and that will loop through all of these computations and invalidate them, or depend, which will store the computation in this list. So the Tracker dependency is really just a convenience to provide us the same functionality that we just built up ourselves.
So far, we've only seen illustrations of one computation, but let me show you what it looks like to have more than one. So I'm going to get rid of some of this cruft here.
So we'll just say, Tracker.rrun. We'll pass, say hello. Why don't we actually say hello? And I'm going to create another function. I'll just call it anotherFunc, and it will pretty much do the same thing, but just to delineate it, I'll give it a hello 2.
Now, let's create two computations. And then over in the browser, I'm going to refresh the watch expression area again and take a look at the Tracker dependency. Notice that there is now two computations being tracked. There's two in the list because we have two computations, one created by this AutoRun call and another one by this one.
So if we call the change function on our dependency, each one of these computations will get invalidated. And so here we can try that out by calling name.set again. And now both of these functions rerun, not just the first one. In summary, the Tracker dependency object allows us to link a reactive data source like the name variable that we have to multiple functions where that data source value is going to be used.