Dart可以绑定到id属性吗？

Question

我需要生成List的单选按钮输入列表，并将<label for="xx">标记链接到<input>，每个标签都需要自己的标识。

但似乎达特不能绑定到一个id属性：

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

上述结果错误：

Error: line 40 pos 22: illegal use of class name 'DivElement' autogenerated_html.DivElement __{{s}};

所以我的问题是：能否省道绑定到一个id属性，如果是的话如何？

另一个问题：是否有另一种方法使用web_ui生成带标签的单选按钮输入列表？

Answer 1

如您的示例所示，web ui编译器以非常特殊的方式使用ID。编译器假定它们是字符串常量，并使用它们生成字段和局部变量名称，并且还可以查询生成的代码中的元素。

我想说这是一个bug /功能请求，应该在web_ui中以某种方式解决。你可以在这里关注这个问题的进度：https://github.com/dart-lang/web-ui/issues/284

Answer 2

我会尝试回答您的备选问题。您可以创建一对元素 - 单选按钮输入和标签 - 并根据需要附加到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个单选按钮。