2

からラジオ ボタン入力のリストを生成し、タグをListにリンクするには、それぞれに独自の ID が必要です。<label for="xx"><input>

しかし、Dart は id 属性にバインドできないようです:

<div id="{{s}}">
  <p id="text">{{s}}</p> <!-- Works as expected -->
</div>

上記はエラーになります：

エラー: 行 40 位置 22: クラス名 'DivElement' の不正な使用 autogenerated_html.DivElement __{{s}};

だから私の質問は: Dart は id 属性にバインドできますか?

別の質問: web_ui を使用して、ラベル付きのラジオ ボタン入力のリストを生成する別の方法はありますか?

4

2 に答える 2

3

私はあなたの別の質問に答えようとします。要素のペア (ラジオ ボタンの入力とラベル) を作成し、必要に応じて DOM にアタッチできます。「男性」ボタンと「女性」ボタンを作成するには、次のようにします。

var button1 = new RadioButtonInputElement();
button1.name = "sex";
button1.value = "male";
button1.attributes['id'] = "sex_male";
var button1_label = new LabelElement();
button1_label.attributes['for'] = button1.id;
button1_label.text="Male";

var button2 = new RadioButtonInputElement();
button2.name = "sex";
button2.value = "female";
button2.attributes['id'] = "sex_female";
var button2_label = new LabelElement();
button2_label.attributes['for'] = button2.id;
button2_label.text="Female";

new RadioButtonInputElement()ラジオ入力を作成するために使用します。new LabelElement()付属のラベルを作成するために使用します。

このコードは特に DRY ではありません。これらを大量に生成する場合は、関数にリファクタリングすることをお勧めします。このようなもの：

List createButtonWithLabel(name, value) {
  var button = new RadioButtonInputElement();

  button.name = name;
  button.value = value;
  button.attributes['id'] = "${name}_${value}";
  var label = new LabelElement();
  label.attributes['for'] = button.id;
  label.text=value.toUpperCase();
  return [button, label];
}

そして、次のように使用します。

var form = new FormElement();  
form.nodes.addAll(createButtonWithLabel('sex', 'male'));
form.nodes.addAll(createButtonWithLabel('sex', 'female'));
query('body').nodes.add(form);

これにより、2 つのラジオ ボタンを含むフォームが表示されます。

于 2012-12-26T20:57:33.820 に答える
1

あなたの例が示すように、web ui コンパイラは非常に特別な方法で ID を使用します。コンパイラは、それらが文字列定数であると想定し、それらを使用してフィールドとローカル変数名を生成し、生成されたコード内の要素を照会します。

これはバグ/機能のリクエストであり、web_ui で何らかの方法で対処する必要があります。この問題の進捗状況は、https ://github.com/dart-lang/web-ui/issues/284 で確認できます。

于 2013-01-14T18:50:35.280 に答える