15

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?

ssarabando
  • 3,397
  • 2
  • 36
  • 42
George
  • 271
  • 3
  • 6

2 Answers2

20

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.

Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
user568109
  • 47,225
  • 17
  • 99
  • 123
  • 1
    It's confusing that in Polymer documentation double braces are used even in examples where definitely no two-way binding - see this example https://www.polymer-project.org/1.0/docs/devguide/data-binding#binding-to-text-content - it seems that double braces - default preferred option? – Elena Sharovar Aug 08 '16 at 15:27
  • @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. – user568109 Aug 09 '16 at 03:56
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).

jptknta
  • 787
  • 6
  • 15