Double Brackets [[ ]] vs Double Braces {{ }} in Po

Question

What's a succinct way to explain the difference between double brackets ([[...]]) and double braces ({{...}}) in Polymer 1.0?

For instance, in the documentation for the <iron-list> element the sample HTML shows:

<template is="dom-bind">
  <iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
  <iron-list items="[[data]]" as="item">
    <template>
      <div>
        Name: <span>[[item.name]]</span>
      </div>
    </template>
  </iron-list>
</template>

Why is data bounded by double braces in one spot (last-response="{{data}}") but bounded by double brackets (items="[[data]]") in another spot?

Answer 1

I find it useful to think of square bracket binding as input to an element and curly brace as input/output or just output. In most cases where I'm wiring up a set of elements there is, invariably, a final destination for the data and that is on an element that presents the information. That final binding uses square braces. Visually, by observing where square and curly braces are used I get an idea what is producing a value (curly braced) and what is consuming it (square braced).

Answer 2

Binding can be either one-way (using [[]]) or two-way (using {{}}, but also use notify).

To explain *-way binding think traffic. one-way binding is when you update model, the view gets updated. When the vice-versa is also true it is a two-way binding.

For more information see the documentation.