Complete example of Polymer Two Way Binding

Question

The polymer documentation has the following two way binding example:

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

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

I'm looking for a complete example that includes the design of the child, programmatic and interactive events the can cause upward and downward propagation of the `{{value}} property, and a demo of of the complete setup / example.

Answer 1

Here are some examples on js fiddle that demonstrate different ways of binding:

• Two-way binding:

  https://jsfiddle.net/tej70osf/

• One-way binding: notify is not set on value property of the child element:

  https://jsfiddle.net/tej70osf/1/

• One-way binding: notify is set to true true on value property of the child element however the value property is bound using square brackets [[value]] instead of {{value}}:

  https://jsfiddle.net/tej70osf/2/

Hope that helps

Answer 2

<dom-module id="user-demo">
<template> 
<paper-input label="FIRST NAME" value="{{firstName}}"></paper-input>
</template>
</dom-module>
<user-demo></user-demo>

In your javascript code:

 Polymer({
        is: 'user-demo',
        properties: {
            firstName: {
                type: String,
                value: 'John',
                notify: true
            }
        }
});

Check out the following fiddle for the full example: https://jsfiddle.net/meenakshi_dhanani/6ffwh0qv/

I tried to use more polymer elements and two way binding. Hope it helps