5

Polymer Project の Paper Elements を使用してフォームを作成していますが、paper-radio-groupタグとその子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フィールドに 1 つの値を生成することに注意してください。ただし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>

これにより 3 つのラジオ ボタンが生成されますが、1 つを選択しても他のボタンは選択解除されません。それぞれに一意の名前を付けると、UI の観点からは機能しますが、標準のラジオ ボタンの動作とは異なります。

これに加えて、各ラジオ ボタンの値はどこで指定しますか? label プロパティはありますが、値はありません。非表示フィールドを のchangeイベントpaper-radio-button、または のcore-selectイベントに接続する必要がありpaper-radio-groupますか? どちらも特にエレガントなソリューションとは思えません。

4

2 に答える 2

5

JavaScript を記述せずにフォーム入力フィールドのドロップイン置換として paper 要素を使用したい場合は、スタイル付きの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 に答える