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

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?

Sacculate

Answer 1

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.

Christoper

It's confusing that in Polymer documentation double braces are used even in examples where definitely no two-way binding - see this example polymer-project.org/1.0/docs/devguide/… - it seems that double braces - default preferred option? – Sallet

@ElenaSharovar Yes, it doesn't make much sense in those places. But I think it is by habit and not any convention. Earlier I also used [[]] in many places, and then had to change to {{}} when more features were needed. Now I simply use latter instead of changing it everytime. – Christoper

Answer 2

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).

Wilbert