 Hey there, Polycasters. Rob here. A few episodes ago, I started this little journey to try and understand Polymer's data binding system. And since then, we've looked at property effects, path notifications, and watching for changes in your JavaScript using observers. So today, we're going to bring it all to a close by finally looking at array bindings. Without further ado, let's hop in. All right. So let's say you've got a list of users in an array. Maybe it's like a leaderboard or a high scores list or something like that. And you always want to show the user that is in the first position. Now logically, you might do something like this, where you try to use array syntax to bind to users square brackets 0. However, a syntax like that is not actually supported in a Polymer binding. Instead, Polymer treats items in an array much the same way as it treats sub-properties in an object. Turns them into paths. So you've got users square bracket 0. And Polymer is actually going to change that to users dot 0. Now in the last episode, I showed you how you can watch for changes on a path using observers. Check that out over there. So let's change our binding to use this new approach. I'm going to create a property called firstUser. And then I'm going to create an observer, which is watching the user's array, this array right here. It's watching that user's array using an asterisk. And remember that asterisk or that wildcard will watch for any changes in the array or its sub-properties, et cetera. And it will call this handler function with a change record as the first argument. And then I can actually pass the second argument. I can pass 0. And that will then serve as the second argument to the function, which we'll use as our index. So anytime this array changes, we're going to get a change record in this handler. And if you recall from the previous episode, change records have multiple properties that we can use. One of those properties is the base property, which always refers to the object previous to the asterisk. So in this case, it's always going to refer back to our user's array. So we can say that we want the base object, and we want the item at that index. So this is basically saying, hey, return users 0. All right, so over here on the right, we can actually see this in practice. I'm going to use my little tricky Chrome DevTools method to select my item. I'll use Polymer's Unshift method to pass a new value into its user's array. And then we can see that that is reflecting up there, because once we've set this new property, it's updating our binding right there, right? And those two match up. Cool. Now I was wondering if I could simplify this a bit, and I noticed in the documentation, it actually recommends using a computed binding. So let's change the code to use that approach instead. So now I've got, instead of a property that I've created, I'm just using a computed binding function. I'm calling compute user. I'm still using the wildcard approach to observe that array. And when you look at compute user, it still gets a change record. It still gets that index argument. And instead of setting a property, it just returns the value back into this binding. So let's give that a shot. All right, go over here. I'll unshift a new user into the front of the array. And everything works. Now for me, this was kind of a revelation of sorts. I realized that computed bindings and observers basically work like the exact same way. And so if you understand one, then you understand the magic of the other, which is pretty cool. Now you might be wondering, if we're just working with paths, how come I can't just bind to the sub-property, if you will, this users.zero path. And then since we're using Polymer's array methods, which normally will notify items, sub-property bindings of changes, if we're using those array methods, then how come these things aren't updating as I would expect them to? Well, what's actually going on is, this will work for the initial render. So the first time I do this, I will see the first place user for my array. I'll see Eric over there. But let's look at what happens when I try and push in a second user. So I'll unshift, and this time I'll add a user named Boris. Nothing updates visually, although we can verify that the user's array has changed. So Boris is now in that first position. And the reasons it's happening is because under the hood, Polymer takes that initial path of users.zero, and it turns its into its own special immutable key, which you can use to keep track of the item. This way you can always refer back to that item, even if the order in the array has changed. And so that means that you can't really reliably use this approach right here. The best practice way of doing things is to either use an observer or use a computed binding. So with that, you are now Polymer Data Binding Masters. Now last week we sent out this little tweet asking what you wanted to see in the next episode of Polycast. You all voted and said you wanted to see unit testing, so be sure to stick around when next week we cover web component tester. In the meantime though, be sure to click that little subscribe button if you've enjoyed this episode. If you have questions for us, you can ping us on a social network of your choosing at hashtag AskPolymer. And as always, thank you so much for watching. I'll see you next time.