Question

我有一个dom-repeat元素，可以创建一个带有几个纸质收音机按钮的纸质收音机组。这些单选按钮每个包含从阵列加载的两条唯一信息。型号名称和价格。我需要能够加载所选单选按钮的型号名称和价格。

我可以加载所选模型的名称，但我无法同时了解如何以价格购买。这是我目前拥有的代码，显示名称：

<paper-radio-group class="layout vertical" id="modelgrp" selected="{{selected}}" >
<template is="dom-repeat" items="{{models}}" >
<paper-radio-button name="{{item.model}}" id="modelsel"><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>

我需要能够调用所选项目的item.price，就像我通过编写{{selected}}来调用item.model一样。

我被发送this link，因为它有点回答我的问题，但我不太了解代码以及如何将代码应用到我的代码中。

Answer 1

使用selected-item并为每个值（model和price）添加条件属性到paper-radio-button元素：

<paper-radio-group class="layout vertical" selected-item="[[selectedItem]]">
  <template is="dom-repeat" items="[[models]]" >
    <paper-radio-button name="{{item.model}}" model$="[[item.model]]" price$="[[item.price]]"><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>[[model]]</span></paper-item>
<paper-item><span>[[price]]</span></paper-item>

然后设置一个观察者来监控对selectedItem的更改，并设置要捕获的两个值，如下所示：

...

observers: [ '_selectedItemChanged(selectedItem)' ],

_selectedItemChanged: function(el) {
  this.price = el.getAttribute('price');
  this.model = el.getAttribute('model');
},

...

获取所选纸张单选按钮的多个值

1 个答案: