Spencer Ponte Blog

Polymer Binding Cheat Sheet

You shouldn’t have to read so many words in Polymer’s docs to figure out how to get the binding you want. Time is precious. There’s code to review. Your hair is turning gray. Use my cheat sheet instead!

Turns out there are only three combinations you really need to know. Why didn’t you just say so Polymer? Here they are:

So if a binding isn’t working the way you want, see the above.

Why so wordy then? Because bindings in Polymer are cooperative; only when both the child and the parent element agree does two way binding take place. Sorta like the prisoner’s dilemma? Or not.

Job contemplates his use of curly braces

Binding annotations ([[]]/{{}}) are applied to attributes of the child element when you add it to the parent element (which Polymer calls “host”, because they don’t care about cogent metaphors). The property flags (notify/readOnly) lie within the child component… okay, now I’m starting sound like Polymer, so you might as well just read their docs.