advanced data binding in Polymer

Question

i have a little problem that i can not solve on my own. I have custom element:

<dom-module id="station">
   <template>
     <country-iso-alpha3 id="country" selected={{country}}></country-iso-alpha3>
   </template>

this custom element station has country property with CZE default value.

if we look in country-iso-alpha3 :

<paper-dropdown-menu>
    <paper-menu class="dropdown-content" attr-for-selected="type" selected="{{selected}}" >
        <paper-item type="CZE">
            <span>CZE</span>
        </paper-item>
        <paper-item type="ENG">
            <span>ENG</span>
        </paper-item>
    </paper-menu>
</paper-dropdown-menu>

properties of country-iso-alpha3 are:

properties: {
    label: {},
    selected: {},
},

what i am trying to achieve is that when user tap on paper item inside paper menu, property country in station element should update. But the only thing that is updated is selected attribute in station

Is there any way how to achieve this? Maybe this is already 3 way data binding.

I know, my english is not best and this is not so easy to demonstrate so if you do not undestand i can try to explain it a little bit better

Answer 1

In your country-iso-alpha3 element, configure selected to propagate changes upward. This can be done by setting notify: true.

properties: {
    selected: {
        type: String,
        notify: true
    }
},

By default, changes are not propagated to the parent element (docs).