Data binding in Polymer 1.0

Question

I'm learning Polymer 1.0 data-binding but am struggling to understand the very first example in the developer guide:

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html

Here is the extract:

Data binding binds a property or sub-property of a custom element (the host element) to a property or attribute of an element in its local DOM (the child or target element).

A binding is created with a binding annotation in the host element’s local DOM template:

<dom-module id="host-element">
    <template>
      <child-element name="{{myName}}"></child-element>  
    </template>
</dom-module>

Am I right in saying that in this example, host-element will have a property named myName and it will bind (2-way) to the "name" property of child-element? Is child-element supposed to be another custom element? I'm not clear on what is supposed to be binding to what and how this intended to be used.

My original pre-conception of data-binding was when binding data from the outside of the custom element (i.e. where the custom element tag is used) to the inside, or vice versa. However this example seems to be purely internally focussed so perhaps I have misunderstood.

Edit:

To further confuse matters, a later example in the same article uses the binding syntax outside of the local DOM (i.e. where custom_element is used), contrary to the explanation in the previous example.

<script>
  Polymer({
    is: 'custom-element',
    properties: {
      prop: {
        type: String,
        notify: true
      }
    }
  });
</script>
...

<!-- changes to "value" propagate downward to "prop" on child -->
<!-- changes to "prop" propagate upward to "value" on host  -->
<custom-element prop="{{value}}"></custom-element>

anthony anthony · Accepted Answer · 2015-06-28T15:46:51

Yes, host-element will have a property named myName which binds to the name attribute of child-element. The child-element in question can be a native html element, or another custom element.

The myName property could be setup like this:

Polymer({
is: 'host-element',
properties: {
  myName: {
    type: String
  }
}
});

And, put into use like this:

<host-element my-name="Frank"></host-element>

Then, to access the myName property from elsewhere inside your element, you would use the this.myName syntax. Using the last example as a starting point, it might look like this:

Polymer({
is: 'host-element',
properties: {
  myName: {
    type: String
  }
},

sayMyName: function(){
    return "My name is" + this.myName;
}
});

Most of the examples on the Polymer data binding page reference binding inside the element, yes. Properties are used to get data from outside of the Polymer element. myName is a good example of this.

The example showing the data binding outside of the local DOM can be a little confusing. I think they're just showing the different ways to bind data, without referencing the scope of the element.

Currently there are two ways to use data binding ({{}} and [[]]) outside of the local DOM. Either place it in another custom polymer element, or use auto-binding templates. Auto-binding templates are a way to use Polymer bindings without creating a new element. Very useful on the index page of your application, especially.

Click here to read about auto-binding templates

Data binding in Polymer 1.0

1 Answers