5

paper-radio-group我正在使用 Polymer Project 中的 Paper Elements 来构建表单，但在使用标签及其子标签时遇到了问题， paper-radio-button. 使用普通的单选按钮列表，我会执行以下操作：

<input type="radio" name="myFieldName" value="MyFirstOption" />
<input type="radio" name="myFieldName" value="MySecondOption" />
<input type="radio" name="myFieldName" value="MyThirdOption" />

请注意，属性是相同的，将单选按钮分组并为字段name生成单个值。myFieldName但是以paper-radio-group相同的方式使用元素不起作用：

<paper-radio-group label="My Field">
  <paper-radio-button name="myFieldName" label="First"></paper-radio-button>
  <paper-radio-button name="myFieldName" label="Second"></paper-radio-button>
  <paper-radio-button name="myFieldName" label="Third"></paper-radio-button>
</paper-radio-group>

这会产生三个单选按钮，但选择一个并不会取消选择其他按钮。如果我给每个人一个唯一的名称，那么它从 UI 角度工作，但与标准单选按钮行为不同。

除此之外，我在哪里为每个单选按钮指定值？有一个标签属性，但没有任何价值。我是否必须将隐藏字段连接到 的change事件paper-radio-button或 上的core-select事件paper-radio-group？两者似乎都不是一个特别优雅的解决方案。

4

2 回答 2

9

这个问题很老了，当时可能不存在该属性，但至少现在有一天，如果我们在示例中选择不同的属性，我们可以拥有属于 a的相同name属性paper-radio-buttonspaper-radio-groupattr-for-selectedpaper-radio-groupvalue

<paper-radio-group attr-for-selected="value">
  <paper-radio-button value="one" name="same_name">Label for one</paper-radio-button>
  <paper-radio-button value="two" name="same_name">Label for two</paper-radio-button>
</paper-radio-group>

在这里留下我的答案，因为这是我在谷歌搜索时受到的打击，可能对其他人有价值。

于 2016-03-22T16:57:24.140 回答
5

如果你想在不编写任何 JavaScript 的情况下使用纸元素作为表单输入字段的替代品，我认为你不能，因为它们只不过是样式化的div。

paper-radio-button的name属性是它的值。当前选择的按钮由paper-radio-group的selected属性指定，并且可以绑定到元素属性。然后，您可以使用属性观察器或在需要时访问此值。如果你给paper-radio-group一个id，比如radio，你也可以直接用.this.$.radio.selected

这是一个小例子：

<!DOCTYPE html>
<html>

<head>
  <script src='http://www.polymer-project.org/components/platform/platform.js'></script>
  <link rel='import' href='http://www.polymer-project.org/components/paper-radio-group/paper-radio-group.html'>
</head>

<body unresolved>

  <polymer-element name="my-app">
    <template>
      <paper-radio-group selected="{{selection}}">
        <paper-radio-button name="small" label="Small"></paper-radio-button>
        <paper-radio-button name="medium" label="Medium"></paper-radio-button>
        <paper-radio-button name="large" label="Large"></paper-radio-button>
      </paper-radio-group>
    </template>
    <script>
      Polymer('my-app', {
        created: function () { 
          this.selection = "medium" 
        },
        selectionChanged: function () { 
          console.log(this.selection); 
        }
      });
    </script>
  </polymer-element>

  <my-app></my-app>

</body>
</html>
于 2014-07-23T10:18:49.623 回答