What's the difference between binding to [[var]] and {{var}} in Polymer 1.x?

As you noticed, there are now two different syntaxes for data binding that have different purposes:

• {{variable}} indicates that you would like the Polymer to automatically determine if the binding should be one-way or two-way .
• [[variable]] indicates that you want to bind to one way only .

Why change?

Polymer 1.x differs from older versions in that bindings are now the default , as opposed to 0.5, where they were always two-sided.

In other words, if you write

<my-element some-property="{{myVariable}}"></my-element>

      

        
        
        
      

    

then by default when

• changed myVariable , Polymer updates the binding and thus updates my-element

someProperty
  
  .
• someProperty changed , Polymer does not update the binding to myVariable
  
  .

This is always the value , unless you set notify:true

the property inside my-element

:

Polymer({
  is: 'my-element',
  properties: {
    someProperty: {
      notify: true,
      ...

      

        
        
        
      

    

C is notify: true

now double-sided, so when

• changed myVariable , Polymer updates the binding to someProperty
  
  .
• someProperty changed , Polymer also updates the binding to myVariable
  
  .

This behavior (when used notify: true

) was the default of 0.5; you must now explicitly ask for it.

When to use [[variable]]

There is no technical reason why you should use [[variable]]

, because Polymer will automatically detect if bindings are one way or two using {{variable}}

. So why are you using it?

Suppose you are working on a large project and you know that based on how data flows in a specific page / element, a specific property should never be changed by the element it is associated with, for example in the case of an element that functionally serves its purpose as tags:

<display-data source-data="{{data}}"></display-data>
...
<data-editor source-data="{{data}}"></data-editor>

      

        
        
        
      

    

Everything looks good! The property is data

bound to both the element display-data

and the elements data-editor

and will be automatically split between them. (For this example, let's assume the display-data

sole purpose is to view the data to which it is bound.)

One day you or someone else is editing display-data

and you will forget about the situation in which it is used above. For a completely different use case, you or another developer would like to be able to display-data

format or otherwise modify the data he gave and push it to any other elements that might be bound to it. You are editing display-data

as such:

• Add notify: true
  
  to sourceData
  
  to enable two-way data binding.
• Add code to display-data
  
  that modifies the property sourceData
  
  .

This works great for all pages that need this functionality. But on the previous page, this was not intended and ends up distorting the data it data-editor

sees!

This problem could have been avoided if:

• The development team was better at communicating and more attentive to where elements are used,
• and / or [[data]] was used instead {{data}}
  
  in the page / element in question.

FROM

<display-data source-data="[[data]]"></display-data>
...
<data-editor source-data="{{data}}"></data-editor>

      

        
        
        
      

    

data-editor

It may change data

, but it display-data

will ever be able to read data

and will not change its value when it changes the value of its properties sourceData

, even when notify: true

installed onsourceData

.

Hence, it could potentially be a good idea:

• Use [[variable]] when you need to bind to variable
  
  . This way you are applying the direction through which data should flow to your element / page / application.
• Use {{variable}} when you know the binding must be two-way .

According to the documentation ,

To make the code clearer, you can use the default [[property]] form and use {{property}} for two-way binding.

That being said, however, it ultimately comes down to choice. If you want to give up use [[variable]]

, no one stops you and you will not start any fires.