Polymer two-way data binding

Question

I have the following custom element. From brevity I've included only the relevant bits of code:

<dom-module id="my_custom_element">
    <template>
        ...
    </template>
</dom-module>
<script>
    Polymer({
        is: 'my_custom_element',
        properties: {
           selecteditem: {
                type: String,
                value: '',
                notify: false                
            }
        },
        //other functions
   });

Notice that the notify field is set to false on the selecteditem property.

Here is the usage of the custom element:

<my_custom_element id="myElement" selecteditem={{myselecteditem}}></my_custom_element>

If something causes selectedItem property to change from within the custom element, then I would expect the following alert statement to not display the new value, because notify is set to false. However the actual behaviour is that it is displaying the new value. Why is this?

alert($('#myElement').prop('selecteditem'));

In the following article:

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

it clearly states:

"If the property being bound does not have the notify flag set, only one-way (downward) binding will occur".

But I am experiencing "upward" binding in this scenario.

Ümit Ümit · Accepted Answer · 2015-06-29T15:13:06

I might be wrong, but I don't think what you are seeing is upward binding.

The property on your my-custom-element will change regardless whether two-way binding is enabled or not, however it won't propogate upwards to a parent my-parent-element.

so myProp in my-parent-element won't be updated when selectedItem changes.

<dom-module id="my-parent-element">
    <template>
        <my-custom-elment selecteditem={{myProp}}>
    </template>
</dom-module>

Polymer two-way data binding

1 Answers