 Hey there polycasters, Rob here. So I have a little confession for you today. I've been using the data binding system in Polymer for almost two years now, but up until very recently, I didn't actually know how it worked. Sure I could use the binding syntax to pass data around inside of my app, but because I didn't understand what was going on under the hood, it sort of all felt like magic to me. And ultimately that made the application a lot harder to debug. So I wanted to create this series of videos so you could understand how bindings are working in your own app. Now to do this, we're gonna have to first know about these things called binding annotations. These are the little symbols that you write in your HTML to tell Polymer that you wanna create a binding at that spot. One way annotations, which are signified by square brackets, allow you to flow data from a host element down to a target, but never back from the target up to the host. To do something like that, you wanna use two-way annotations or what are sometimes called automatic annotations. This lets the host and the target pass data back and forth. Now I'll explain this a little bit more in a minute, but first I just wanna stop and think, what's actually going on inside of my app when Polymer encounters an annotation? Okay, so when Polymer first sees your element, you're trying to register it and everything, Polymer's gonna parse your element's template and actually look for these nodes with these binding annotations. And when it finds these sort of binding annotations, it's gonna create what it calls property effects. And a property effect is a little object that knows which node in the DOM to update whenever this property has changed. So in this example, Polymer's gonna create a property effect for this div right here and another property effect for this paper input element. So we'll have two property effects and all of these property effect objects get stored in an array. Now I like to think of that array of property effects as kind of like a checklist of actions that need to run anytime that property updates. And you can actually go and look at this actual array if you want, you can hop into the dev tools and this is an element that I created. I can use that little trick that I've shown you before where you can select it in the elements panel and then just do dollar sign zero and type dot underscore property effects. Now this is a private part of Polymer. It's not something we should be messing with but we can inspect it, it's kind of fun. And it'll give you this object with this array and you can see here there's two objects inside of here. These are our two property effects and you can see a little bit of info about the property effect itself. It's a text property effect. It's set to use like curly brace mode which I'm assuming means it's in some sort of two way binding mode, et cetera. So it's just kind of interesting that you can go in and you can kind of inspect this checklist a little bit. Now, looking back at our example, I'm gonna simplify things just a little bit so there's less markup to look at. Okay, so this is our template and this is our Polymer element definition. Now the other thing that Polymer is gonna do aside from creating property effects is it's going to create a setter for this property that we've got here, this foo property. So you can see we've got this little set foo setter down here and if you're not familiar with syntax like this, I'll link to a little doc on MDN that talks about JavaScript setters. And I should stress this is not the exact syntax that Polymer uses. It does it kind of a little differently at runtime but essentially what happens is once it's created property effects for a property, it also creates a setter for that property and inside of this setter, there's a few interesting things that take place. The first is anytime the property changes, Polymer's gonna do what it calls dirty checking. So a dirty check is when you compare an old value to a new value and you see if they've actually changed. And what Polymer does is it actually stores this foo property in a super duper private variable called underscore underscore data underscore underscore and you can kind of poke around and see this in the DevTools as well. It stores the original value over there and whenever someone changes the property, changes our foo property, if they changed it through JavaScript or changing the attribute or something like that, it's first gonna check to see if the old value and the new value are different because if they're the same, there's no point in doing a bunch of work. If they are different, if we do pass the dirty check, then we're gonna hold on to that new value. And the next thing after that is we're just gonna loop over all of our property effects, give them that new value and then that tells them to go update these nodes in the DOM. So if this is sort of our fake checklist of property effects, and again, this is all just pseudo code, but this is kind of what they look like, right? Someone passes in a new value, we say, hey, it's different from the old value. Cool, let's hold on to it. Now let's just start walking through that checklist of properties and we'll say, all right, let's set that new value up here on this div. Okay, cool, done. Next one, let's set that new value over here in the input element and so on and so on. And if these elements within themselves have property effects, those will kick off and run. And basically that's how data gets passed all the way down the line through all the different children. Now, I'm sure some of you are seeing this and saying, well, what about the property's object? Because I know this is also part of the mix, right? How does this thing get involved? Well, the property's object basically allows you to add what I think of as sort of like metadata to your property's setter, if you will. So here's our example again, and I've got this property's object now and I've got my foo property inside of here. And the setter is already set up. So it's gonna first dirty check for new values, it's gonna run the property effects if things are different. And let's say in my property's object, I add an observer, right? And I say, okay, well, when foo changes, I want you to run this observer function right here. Well, what happens is inside of the setter, Polymer's just going to literally call that function. I know it seems like it might be doing something more magical, but really, this is just it. It's just gonna call that function as soon as it's done doing any other work. If you give it a notify true flag, right? And this enables two-way binding throughout the Polymer system. Well, what this is actually doing is it's just calling this.fire, which dispatches an event, and it's just dispatching an event called foo-changed and passing along the value, the brand new value. So anytime you do this on a property, Polymer will always create this sort of event dispatch and the event is always called something-changed, whatever the property name is, dash-changed. And this is really interesting because it means, if you yourself are binding to an element, like here I'm binding to paper inputs value attribute, what Polymer does when it first boots up is it says, okay, I found an annotation here. Let me create a property effect and everything. Are we bound to some other elements attribute? Ah, yes, we are. I can see that we're bound to this value thing. Okay, so if this then fires a event called value-changed, then hearing that event is gonna tell me to update this property right here. So really, that's all that's happening in properties two-way binding system. Your element fires a changed event, some other element that is bound to it listens to that changed event and it updates its own property because of that. Now, here I've got a two-way binding and so you can actually see this system in play that I just described. So I'm gonna go in here and this is a representation of our element and I can type in to the paper input field and it's gonna fire those changed events and then that means I update foo and because it's gonna go through and play through all of my property effects, that means foo gets updated right here as well and you can see that here, so they end up matching. But what if I'm using a one-way binding, right? So here I'm using square brackets now instead of the curly braces. Well, that just tells Polymer, hey, don't set up the event listener for value-changed. That's really all that happens there. Now I go in, I type in this input field and because I'm not listening for those events, I don't hear anything and this property up here remains what it always was so we're not pushing any new data up there. Okay, so the last thing I wanna talk about are read-only properties. So you can set a read-only flag and that means that an outsider using your element can't push data into it in any way. So what happens there is Polymer just doesn't create the setter, right? It doesn't create a public setter at all because we don't want someone accidentally calling that and instead, because it does still internally need to work with that data, it creates a little private setter that it prefixes with this underscore and you can actually work with these. This is the actual syntax that it uses. So if you need to work with your read-only property from within your element, you can use this private setter to update it and that is how that works. All right, so now you know the basics of data binding but there's still a lot of cool stuff to cover. Binding to arrays and deeply nested objects and computed properties and change records and notifications and well, anyway, I'll save that for another episode. Now, if you've enjoyed this video, be sure to go down and click the subscribe button because that's actually how we get to keep making these. Also, if you have questions for me, leave them down in the comments or ping me on a social network of your choosing, hashtag ask polymer. As always, thank you so much for watching. I'll see you next time.