Week 11 | Notify, ReadOnly, Data binding

polymer 1.0
Tue Nov 08 2016

This was kind of tricky to wrap my hear around to, but it isn’t that difficult.

Polymer (and most front-end libraries) has a technique to bind data from the element’s imperative part (JavaScript) to the element’s declarative part (HTML).

HTML double-arrow JavaScript

I’ve declared a property named “message” and a paper-input element with the value of that property and a message to display the value.

You can notice that to “bind” the value I used the double curly brackets and the double square brackets.

  1. With the curly brackets the data flows from JavaScript to HTML and from HTML to JavaScript. So every time it changes from the user in the input by adding “asdfasdf” the change is passed back from the declarative part to the imperative part and from there updated to any other “[[message]]” or “{{message}}” area.

    data-binding

  2. With the square brackets the data flows only from JavaScript to HTML and not from HTML to JavaScript.

    data-binding2

For extra flexibility in Polymer we can add the “notify” or “readonly” attributes.

  1. With the notify every time we change the “message” value an event is triggered named “message-changed”
  2. With the ReadOnly the data is binding from JavaScript to HTML only and not from HTML to JavaScript even if we have double curly brackets

data-binding3

Full Stack Weekly Newsletter

A free weekly newsletter for full stack web developers!