Dart 可以绑定到 id 属性吗？答案

【问题标题】：Can Dart bind to id attribute?Dart 可以绑定到 id 属性吗？
【发布时间】：2012-12-11 21:29:20
【问题描述】：

我需要从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 生成带有标签的单选按钮输入列表？

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

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

【讨论】：

感谢您的回答。我跟着，可以看到它会起作用。然而，我们的目的是使用 web_ui 来实现，以避免在代码中生成元素（这很乏味，并且存在维护问题）。

【解决方案2】：

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

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

【讨论】：