 Hey there, Polycasters, Rob here. In the last episode of Polycast, I showed you how to bind to sub-properties in your markup, but I totally forgot to show you how to bind to those same changes in your JavaScript. It's actually a really cool feature of Polymer called Observers, so let's check those out. A declared property can have an observer method that runs every time that property changes. And I showed how that worked in a few episodes prior, so if you haven't seen that, you can go follow this link right here to check that out. But basically what I've got right here is this X unicorn element. It has a property called sparkles and an observer that I've defined called sparkles change, which is this function down here that'll run any time sparkles is updated. So that's the first kind of observer function. It's one that a lot of developers are familiar with, but one that we haven't talked about yet, which is really cool, is the ability to use this observer's array. So like the previously mentioned observer method, you can use this array to specify a handler that should run when a property changes. And you do this by adding a method name, which is a string to the array, and in the parentheses you put the property that you want to observe. So in this case, I have a zombie manager element and my properties are this zombies object. My observer's array has one observer in it, which is this zombies changed function and it's looking at the zombies property. And anytime that object is updated, it's gonna run this handler right here and get the new zombies object. But there's a lot more that we can do with the observer's array. For instance, we can use it to observe element subproperties. So if I want to look at zombies.hunger, then I can have it do that instead and that new value will get passed to this hunger changed function. What's really cool is we can actually observe multiple properties at the same time. And what's great about that is, if you have a method that you want to run only when those properties have a value, this is a good approach to use because that method right there is not going to execute if any of these properties is undefined or null or anything like that. So if you have asynchronous properties that take a little while to initialize or something like that, rather than writing some really complex logic to keep track of all of them, you can just use an observer to watch multiple properties. And when they all finally have a value, just kick off some function. So really, really handy trick. Let me do a quick example to demonstrate how observers work. I've got this element that I've created here and I've really simplified it down. So you're only seeing the important parts of the definition. Up here at the top, I've got an image tag, which would be presumably inside of my template. And then I've got this binding for blurb right here. And that value is going to come from my observer function. So in my elements definition, I have this bio property. And that's an object which defaults to this guy right down here. So it's an object with a maker property, which right now is set to Dr. Frankenstein. Anytime this thing changes, we're going to run maker changed. We're gonna observe bio dot maker. And then we'll set this dot blurb equal to that new value. And that is gonna go and update our binding right up there. So let's do that in practice. Over here in the DevTools, I've got my element rendering right here. I've already got it selected in the elements panel so I can use my dollar sign zero trick to refer to it. And I'll just say dollar sign zero dot set bio dot maker to rob. And that's gonna update visually right there. Now, if you aren't familiar with the set method, you can check out our previous episode, which talked about using set and notify path in order to update element sub properties and have those update bindings. But this is kind of like a useful way of working with observers, but there's actually one last trick that observers have up their sleeve. Let's say instead of just observing maker, let's say that maybe this object had like 100 sub properties. And I wanted to observe if really like any of them changed. It would be really annoying to have to put all of those into this one huge observer function. And so the last trick up the sleeve of the observer array is its ability to look at wild cards. So here I've changed the code a little bit. Now, instead of looking at bio dot maker, I'm looking at bio dot star. And what that's gonna do is observe any sub property and if these were objects and they had more sub properties, it would just observe all that stuff inside of this bio objects. It's a really powerful technique. And instead of passing just a value, what polymer is going to pass to our handler function is gonna be what it's referred to as a change record. A change record is sort of like a special polymer object and it has three properties. It has a path and that is the, it's a string which refers to the path that changed. So if we changed bio dot maker, this path string would be bio dot maker. It has a value property, which is the actual value that was updated. And then finally it has a base property. And the base property refers to the object that precedes the wild card. So if we were looking at bio dot foo dot bar dot star, then the base property would be bio dot foo dot bar. Okay? So what I'm doing here is in my bio changed function, I'm taking the change record and I'm looking at the path. And if it's bio dot maker, I'm doing one thing. I'm updating this binding. It's bio dot name. I'm updating a different binding, this critter binding, which is gonna update the span right here. Okay, so over in our depth tools, let's give a shot. See dollar sign zero set bio dot name. And we'll set that to Frank. See that updates our first span. And now let's update the other thing. We'll set bio dot maker to Rob. And voila, that updates our other binding. So with observers and change records, we now have awesome tools for dealing with new data in our app. And we're actually finally ready to start talking about binding to arrays, but I'll save that for the very next episode. Now, if you've enjoyed this episode, consider clicking the subscribe button. And if you have questions for us, you can ping us on a social network of your choosing at hashtag ask polymer. As always, thank you so much for watching and I'll see you next time.