Доступ к выбранным значениям элементов из другого элемента

Question

Я делаю приложение «Полимер», которое использует элемент «Железные страницы», содержащий три страницы. На первых двух страницах есть бумага-радиогруппа каждая, а каждая кнопка-бумага имеет имя и значение цены. На третьей странице должен отображаться список с именем и ценой опций, выбранных на первой и второй страницах.

Вот код для элемента внутри первой страницы:

<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> 

На второй странице есть элемент, который в основном идентичен ожидать различных вариантов.

Я выяснил, что я могу получить имя выбранного элемента для отображения, как вы можете видеть в документе, содержащем {{selected}}.

Но я не могу понять, как я могу получить это конкретное значение {{selected}} внутри другого элемента. Я пробовал такие вещи, как {{modelgrp.selected}} и {{modelgrp. $. Selected}}, но ничего не отображает.

Кроме того, значение {{selected}} предназначено только для имени. Как я могу получить значение item.price для выбранного элемента?

Вот код для третьей страницы, которая не работает должным образом:

<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> 

Answer 1

То, что я узнал на протяжении всей моей работы в том, что шаблон идентификатор ссылки (за $ из компонентов ссылки) не работает в пределах привязок. Это связано с тем, как ссылочные значения привязок. JustinXL близок. Вы должны выставить не элемент, а выбранную переменную, чтобы включить двустороннюю привязку на страницах. Очень важно установить «notify: true» в свойстве «selected» для model-app, чтобы он мог передать значение до шаблона #app. Установка значения шаблона #app для currentSelected будет распространяться на любые элементы внутри него, которые используют его значение. Например, выбранный атрибут summary-app. Надеюсь, это объяснит это.

<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 не является необходимым, но помогает в видеть изменение атрибута, когда выбранный элемент делает изменение. Другой компонент

<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> 

Затем, используя их должным образом:

<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>