我需要从List
生成一个单选按钮输入列表,并将<label for="xx">
标记链接到<input>
,每个标记都需要自己的ID。
但似乎Dart无法绑定到id属性:
<div id="{{s}}">
<p id="text">{{s}}</p> <!-- Works as expected -->
</div>
以上导致错误:
错误:第40行pos 22:非法使用类名'DivElement'autogenerated_html.DivElement __ {{s}};
所以我的问题是:Dart可以绑定到id属性,如果是,如何绑定?
另一个问题:是否有另一种方法可以使用web_ui生成带标签的单选按钮输入列表?
答案 0 :(得分: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()
创建随附的标签。
此代码不是特别干;如果你要生成很多这些,你可能想要将它重构为一个函数。像这样:
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个单选按钮的表格。
答案 1 :(得分:1)
如您的示例所示,web ui编译器以非常特殊的方式使用ID。编译器假定它们是字符串常量,并使用它们生成字段和局部变量名称,并在生成的代码中查询元素。
我会说这是一个错误/功能请求,应该在web_ui中以某种方式解决。您可以在此处关注此问题的进展:https://github.com/dart-lang/web-ui/issues/284