 Hey there, Polycasters. Rob here. One of the things that's kind of confused me about Polymer's data binding system is how it binds to sub-properties of objects. It seems like you should be able to just, like, create a binding on an object, and it's sub-property, and update that in JavaScript, and things would just magically work. But reality proves otherwise. So today on Polycast, what I want to do is go through how the sub-property binding system works and show you how to do bindings in your Polymer elements. Let's check it out. So here I've got a pretty simple element for displaying an employee's manager. And the first thing I'm going to do is just trim this down to the bits that we really want to focus on. So we've got just our HTML and just our JavaScript down here. Now I've got this div, and inside of here, I'm binding to user.manager. So I'm binding to the sub-property of the user object. And what I can do is define that user object here on my elements prototype. And I'm just going to have it return this value object that sets manager equal to Paul. So far, so good. Let me drop in a button so that I can change this manager. So I've got this button, and when I tap it, it's going to call change manager. And when I implement that function, it's just going to set user, this.users, manager property to Fred. So we would expect over here on the right, I've got my element here, we would expect that when I click this button, this should update. So let's go in there, and we'll click it. And yeah, nothing happens. I'm just sort of clicking it over and over again, not getting anything. OK, well, let's try something else. Instead of trying to set the sub-property, let's actually just replace the user object with a completely new object. Let's go over here and try that. OK, so that does work. But why? You know, what is going on here? Why are they different? Well, if you remember in the last video, I mentioned that when you create a binding like this, Polymer is going to do two things. It's going to create property effects. And it's going to create a setter for that property. So what happens is, when I just completely replace the user object, in that case, the setter is being called, and it's running through all of our property effects, just like any other property. But when I change a sub-property on that object, well, in that case, there's no reason to call the setter, because I haven't actually said this dot user equals something new. So the setter's not firing, therefore, the property effects are not running. So what Polymer is doing when it sees this sort of binding is instead of binding directly to that property, it's creating what it calls a path binding. And so we've got these property effects, and they know about this path, but we need to tell the system that the path has updated. And in order to do that, Polymer has actually implemented its own method called NotifyPath. So we can go in, and we can imperatively change our user.manager property, and then we can tell the system that this path right here has updated. We can pass in that value. And what Polymer is going to go do is it's going to look at any of its property effects. It's just going to loop through them. It's going to find any of those property effects that have this path inside of them. And it's going to update those nodes with this particular value. And in fact, since it's just such a kind of a common task that you would do, Polymer actually gives you this little helper method called this.set, which will not only set the property for you in JavaScript, but it'll also call NotifyPath on your behalf. Now the reason why Polymer uses this approach versus creating a setter for all of these sub-properties is that it would just be really, really expensive to try and create a setter for every single sub-property in any object. You could imagine if you had an object with like 1,000 sub-properties that trying to replace all of those with setters. If you had multiple instances of those elements and they all had different objects, the runtime cost would be pretty massive. So instead, as kind of a compromise between ease of use and performance, we have these methods that allow us to work with these path bindings. Now this is how you do it imperatively, but let me also show you how you can do it declaratively through a data binding. Now here I've got the same element, but this time, user.manager is bound to this paper input field, and it's also bound to this div up here. So when I go and I start typing, it's going to update that binding in both places. And what's happening is under the hood, when Polymer sees that our paper input is updating, it checks this property right here, and it's like, oh, I see that this is a path binding. I see that this is some structured data. I'm just going to go ahead and call this.set on the user's behalf, because I figure that's what they wanted to do. So there's two ways that you can go about updating sub-properties. You can either use Polymer's helper methods, or you can, if you happen to be in a situation where you can do this, you can also set up data bindings and have it update that way as well. So now you know a bit more about binding to objects in your Polymer elements. But there's a lot of really cool meaty topics, which we haven't covered yet, like binding to arrays and change records and all that cool stuff. But I'm going to save all that for the next episode. Now for those of you who are wondering what a half pipe has to do with data bindings, half pipe has nothing to do with data bindings. I just found a freaking half pipe next to my office. Just trying to shoot here. So if you've enjoyed this episode, you've enjoyed our half pipe, consider clicking that subscribe button and maybe catch us on the next episode of Polycast. As always, thank you for watching, and I'll see you next time.