Polymer Binding Cheat Sheet

Posted by Spencer on August 8th, 2016

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:

  • One way down: [[]]
  • One way up: {{}} notify: true, readOnly: true
  • Two way: {{}} notify: true

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

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.

Posted in Coding