Access selected items values from another element

Question

I'm making a Polymer application that uses a iron-pages element containing three pages. The first two pages contains a paper-radio-group each and each paper-radio-button has a name value and a price value. The third page is supposed to display a list of with the name and price of the options i selected in the first and second page.

Here is the code for the element inside the first page:

<dom-module id="model-app">
<template>

    <paper-radio-group class="layout vertical" id="modelgrp" selected="{{selected}}">
    <template is="dom-repeat" items="{{models}}">
    <paper-radio-button name="{{item.model}}"><span>{{item.model}}</span> <div class="paper-font-caption"><span>{{item.price}}</span> SEK</div></paper-radio-button>
    </template>
    </paper-radio-group>
    <paper-item><span>{{selected}}</span></paper-item>

</template>
<script>
Polymer({
  is: 'model-app',
  ready: function() {
    this.models = [
        {model: 'Model1', price: '16 860'},
        {model: 'Model2', price: '17 391'},
    ];
  }
});
</script>

</dom-module>

The second page has an element that is basically identical expect for different options.

I have figured out that I can get the name of the selected item to display as you can see in the paper-item containing {{selected}}.

But I can't figure out how I can get that specific {{selected}} value inside another element. I've tried stuff like {{modelgrp.selected}} and {{modelgrp.$.selected}} but it doesn't display anything.

Also, the {{selected}} value is only for the name. How can I get the item.price value for the item that is selected?

Here is the code for the third page that isn't working properly:

<dom-module id="summary-app">
<template>
    <paper-item>{{modelgrp.$.selected}}</paper-item>
    <paper-item>test</paper-item>
</template>
<script>
Polymer({
  is: 'summary-app',
  ready: function() {

  }
});
</script>

</dom-module>

Try exposing the item as a property and then you can do two-way data binding across different pages. — Justin XL
@JustinXL I've checked the data binding page on the Polymer site but I can't really understand how to use it in my application. Could you explain it a bit more? — Edalol

Brandon Brandon · Accepted Answer · 2015-08-26T01:29:13

What I have learned throughout my work is that template id referencing (the $ from component reference) doesn't work within bindings. This is because of how bindings reference values. JustinXL is close. You should expose not the item, but the selected variable in order to enable two-way binding across the pages. It's important to set "notify: true" on the "selected" property for model-app so it can pass the value up to the #app template. Setting the #app template's value for currentSelected will then propagate to any elements within it that use it's value. Such as summary-app's selected attribute. Hope this explains it.

<dom-module id="model-app">
<template>

    <paper-radio-group class="layout vertical" selected="{{selected}}">
    <template is="dom-repeat" items="{{models}}">
    <paper-radio-button name="{{item.model}}"><span>{{item.model}}</span> <div class="paper-font-caption"><span>{{item.price}}</span> SEK</div></paper-radio-button>
    </template>
    </paper-radio-group>
    <paper-item><span>{{selected}}</span></paper-item>

</template>
<script>
Polymer({
  is: 'model-app',
  properties: {
        selected: {
              type: Number,
              notify: true,
              reflectPropertyToAttribute: true
        }
  },
  ready: function() {
    this.models = [
        {model: 'Model1', price: '16 860'},
        {model: 'Model2', price: '17 391'},
    ];
  }
});
</script>

</dom-module>

reflectPropertyToAttribute isn't necessary, but aids in seeing the change to the attribute when a selected item does change. Other component

<dom-module id="summary-app">
<template>
    <paper-item>[[selected]]</paper-item>
    <paper-item>test</paper-item>
</template>
<script>
Polymer({
  is: 'summary-app',
  property: {
        selected: Number
  },
  ready: function() {

  }
});
</script>

</dom-module>

Then using them properly:

<template is="dom-bind" id="app">
    <item-pages>
        <!-- First page -->
        <model-app selected="{{currentSelected}}"></model-app>
        <!-- Second page -->
        <summary-app selected="[[currentSelected]]"></summary-app>
    </item-pages>
</template>

Access selected items values from another element

1 Answers