Week 12 | Data binding: Under the Hood

polymer 1.0
Fri Nov 18 2016

In the previous blog post we went over data-binding in Polymer.js. Everything looks like magic though, so we’ll dive in a bit deeper.

  1. When we load the element, Polymer will go through the dom-module section and check for double square “[[” brackets or double curly “{{” brackets.annotations
  2. Then Polymer will create an array named _propertyEffects for my two properties containing all of the info of the “binded” areas.propertyeffects
  3. Polymer will then create a setter for each property. In our case a setter for the message property and every time it changes it run the _propertyEffects updating the changes everywhere specified in our DOM
  4. Lastly, if we have the notify:true property set it will also trigger the “message-changed” event

This is how Polymer 1.x binding works under the hood!

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!