聚合物1纸 - 射电组问题

Question

我正在尝试使用paper-radio-button绑定一组paper-radio-group。这是Index.html中的代码：

<paper-card heading="Radio button group binding">
  <div class="card-content">
    <h4>Which writer you like the most?</h4>
    <paper-radio-group>
      <radio-group-binder data='[{"name": "William Shakespere", "value": "ws"}, {"name": "Arthur Conan Doyale", "value": "cd"}, {"name": "Shidney Sheldon", "value": "ss"}]'>
      </radio-group-binder>
  </paper-radio-group>
  </div>
</paper-card>

我的自定义元素如下所示：

<template>
  <template is="dom-repeat" items="{{data}}">
     <paper-radio-button name="{{item.value}}">{{item.name}}</paper-radio-button>
  </template>

数据绑定正常，但我可以在组内选择多个单选按钮。我在这里做错了什么？

我附上了现在表现如何的截图。我需要能够在此radio-button-group中一次只选择一个选项。

Answer 1

您需要定义attr-for-selected以引用它需要分组的属性。

<paper-radio-group attr-for-selected="name">

Answer 2

实际上selected={{button}}会将所选单选按钮的名称/值存储到变量按钮中。以便您可以在以后使用它。至于你的问题“在收音机组中只选择一个单选按钮”，我做了一些改变，如下所示，它对我有用。请试一试：

自定义元素：

<dom-module id="radio-group-binder">
<template>
 <paper-radio-group selected="{{button}}" attr-for-selected="name">
  <template is="dom-repeat" items="{{data}}">
     <paper-radio-button name="{{item.value}}">{{item.name}}</paper-radio-button>
  </template>
 </paper-radio-group>
</template>

的index.html：

 <radio-group-binder data={{data}}></radio-group-binder>
    <script>
   var data = [{"name": "William Shakespere", "value": "ws"}, {"name": "Arthur Conan Doyale", "value": "cd"}, {"name": "Shidney Sheldon", "value": "ss"}];
   document.querySelector('radio-group-binder').data = data; 
    </script>

您可能需要在这两个地方添加“已选择”。你可以试试下面的东西吗？

<radio-group-binder selected="{{button}}" data= yourdata....    

<paper-radio-group selected="{{button}}" attr-for-selected="name">