Dart peut-il se lier à l'attribut id ?

Question

Je dois générer une liste d'entrées de boutons radio à partir d'un fichier List et de relier le <label for="xx"> à la balise <input> chacun a besoin de son propre identifiant.

Mais il semble que Dart ne puisse pas se lier à un attribut id :

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

Le résultat ci-dessus est une erreur :

Erreur : ligne 40 pos 22 : utilisation illégale du nom de classe 'DivElement' autogenerated_html.DivElement __{{s}} ;

Ma question est donc la suivante : Dart peut-il se lier à un attribut id, et si oui, comment ?

Et une question alternative : Existe-t-il un autre moyen d'utiliser web_ui pour générer une liste de boutons radio avec des étiquettes ?

Answer 1

Je vais essayer de répondre à votre autre question. Vous pouvez créer une paire d'éléments - une entrée de bouton radio et des étiquettes - et les attacher au DOM si nécessaire. Pour créer des boutons "homme" et "femme", vous pouvez procéder comme suit :

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";

utiliser new RadioButtonInputElement() pour créer une entrée radio ; utilisez new LabelElement() pour créer l'étiquette d'accompagnement.

Ce code n'est pas particulièrement DRY ; si vous avez l'intention de générer un grand nombre de ces codes, vous pouvez le transformer en une fonction. Quelque chose comme ceci :

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];
}

et ensuite l'utiliser comme ceci :

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

Cela devrait vous donner un formulaire avec 2 boutons radio.

Answer 2

Comme le montre votre exemple, le compilateur web ui utilise les ID d'une manière très particulière. Le compilateur suppose qu'il s'agit de constantes de type chaîne de caractères, et les utilise pour générer des champs et des noms de variables locales, ainsi que pour rechercher l'élément dans le code généré.

Je dirais qu'il s'agit d'une demande de bogue/de fonctionnalité qui devrait être traitée d'une manière ou d'une autre dans web_ui. Vous pouvez suivre l'évolution de cette question ici : https://github.com/dart-lang/web-ui/issues/284