動態檢測Dart中勾選的復選框/聚合物元素

Question

Dart的新手，沒有JS經驗。 我編寫了代碼來填充JSON的下拉列表。

編輯：我正在嘗試添加聚合物元素。

聚合物.dart

import 'package:polymer/polymer.dart';

@CustomTag('player-item')
class PlayerItem extends PolymerElement{
  @observable String playerName='hello';
  void removePlayer(){
    playerName='';
  }
  PlayerItem.created(): super.created(){}

}

最初是未定義構造函數的錯誤。 在super.created中添加了空括號。 已修復錯誤我在做什么錯。 如何正確做到這一點？

polymer.html

playername =要動態顯示的玩家名稱。

現在使用默認字符串。

removeplayer =（想法是）刪除整個聚合物元素。

<polymer-element name="player-item">
  <template>
    <input type="image" src="button_minus_red.gif" on-click="{{removePlayer}}">
    <div>{{playerName}}</div>

  </template>

  <script type="application/dart" src="player-item.dart"></script>
</polymer-element>

編輯的Dart代碼：目標是首先生成選項，然后選擇其中一個，如果單擊圖像（用於此目的的聚合物元素），則隨后將其刪除。

通過了聚合物示例母版。 但找不到相關的東西。

需要幫助：1.如何動態添加聚合物元素？

2. 如何將值（在這種情況下為播放器名稱）傳遞給動態添加的聚合物元素？

3. 如何去除高分子元素？

4. 如何刪除通過* .appendedtext添加的附加文本？

        import 'dart:html';
import 'dart:convert' show JSON;
import 'dart:async' show Future;
import 'package:polymer/polymer.dart';
import 'player-item.dart';

//ButtonElement genButton,desButton;
SelectElement selectTeam;
FormElement teamPlayer;
FormElement yourPlayer;
InputElement teamPlayers;

//final subscriptions = <StreamSubscription>[];
List<String>teams=[];
List<String>players=[];
 main() async{
  selectTeam = querySelector('#teamNames');
  teamPlayer = querySelector('#teamPlayers');
  yourPlayer = querySelector('#yourPlayers');

  selectTeam.onChange.listen(populateTeams);
  try {
      await prepareTeams1 ();
      selectTeam.disabled = false;  //enable
      //genButton.disabled = false;
    } catch(arrr) {
      print('Error initializing team names: $arrr');
    }

 }

void populateYourPlayers(String name){
  querySelector('#yourPlayers').children.add(new Element.tag('player-item'));
            var input = new InputElement();
            input.type = "image";
            input.src = "button_minus_red.gif";
            input.id = name;
            print('yo');
            input.width = 15;
            input.height =15;
            input.appendText(name);
            input.onClick.listen((remove){
              remove.preventDefault();
              input.remove();
              //yourPlayer.children.remove();
            });
            yourPlayer.append(input);
          //  yourPlayer.append(y);
           yourPlayer.appendText(name);
            yourPlayer.appendHtml("<br>");            
            }

void removeYourPlayers(Event e){

  yourPlayer.querySelectorAll("input[type=checkbox]").forEach((cb) {
         // print('${cb.checked}');
          if(cb.checked == true){
            print('${cb.id}');
            yourPlayer.children.removeWhere((cb)=>cb.checked==true);
          }
        }
    );
}


Future prepareTeams1()async{
  String path = 'teams.json';
  String jsonString = await HttpRequest.getString(path);
  parseTeamNamesFromJSON(jsonString);
}

parseTeamNamesFromJSON(String jsonString){
      Map team = JSON.decode(jsonString);

      teams = team['Teams'];
          print(teams);     
          for (int i =0; i< teams.length; i++){
                        var option = new OptionElement();
                        option.value = teams[i];
                        option.label =teams[i];
                        option.selected = false;
                        selectTeam.append(option);
                      }
    }

Future prepareTeams2(String Team)async{
  String path = 'teams.json';
  String jsonString = await HttpRequest.getString(path);
  parsePlayerNamesFromJSON(jsonString, Team);
}

parsePlayerNamesFromJSON(String jsonString,String Team){
      Map team = JSON.decode(jsonString);
      teamPlayer.children.clear();
      teams = team[Team];
          print(teams);
          for (int i =0; i< teams.length; i++){
          var input = new InputElement(type:"image");
        //  input.type = "image";
          input.id = teams[i];
          input.src = "button_plus_green.gif";
          input.width = 15;
          input.height =15;
          input.onClick.listen((p){
            p.preventDefault();
            populateYourPlayers(teams[i]);
          });
         //input.onClick.listen((event){populateYourPlayers(teams[i]);});
          //subscription.cancel();
          teamPlayer.append(input);
          teamPlayer.appendText(teams[i]);
          teamPlayer.appendHtml("<br>");
          }
    }

void populateTeams(Event e){
  print('selectTeam.length: ${selectTeam.length}');
  print(selectTeam.value);
  prepareTeams2(selectTeam.value);

  if (selectTeam.length == 0){

}

}

修改后的HTML：

    <html>
  <head>
    <meta charset="utf-8">
    <title>Pirate badge</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="piratebadge.css">
    <link rel="import" href="player-item.html">
  </head>
  <body>
    <h1>Team Names</h1>

    <select id="teamNames">

    </select>
    <h1>Team players</h1>
    <form  id="teamPlayers">
</form>
<div>
        <button id="generateButton" disabled>Add Player/Players</button>
      </div>
      <h1>Your players</h1>
    <form  id="yourPlayers">
</form>
<player-item></player-item>
<div>
        <button id="destroyButton" disabled>Remove Player/Players</button>
      </div>
    <script type="application/dart" src="piratebadge.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

並根據該選擇顯示帶有復選框的表單。 我面臨的問題是如何檢測到它們已選中了哪些復選框，如果是，則如何捕獲該復選框的值。

可能重復如何知道Dart中是否選中了復選框或單選按鈕？

但是，它們不是動態創建的復選框。

如果上述方法有誤，請告知。

Answer 1

您可以閱讀CheckboxInputElement的checked屬性

    parsePlayerNamesFromJSON(String jsonString,String Team){
      Map team = JSON.decode(jsonString);
      teams = team[Team];
          print(teams);   
          for (int i =0; i< teams.length; i++){
          var input = new CheckboxInputElement();
          input.type = "checkbox";
          input.id = "player";
          input.onChange.listen((_) {
            print("teamplayer ${input.checked}");
          });
          teamPlayer.append(input);
          teamPlayer.appendText(teams[i]);
          teamPlayer.appendHtml("<br>");

    }

Answer 2

取決於何時要檢測已檢查狀態，有兩種方法。

您可以將單擊處理程序添加到“提交”按鈕，然后查詢復選框。

querySelector("input[type=submit]").onClick.listen((e) {
  querySelectorAll("input[type=checkbox]").forEach((cb) {
    print('${cb.id} {cb.checked}');
  });
});

當前，您正在為每個復選框分配相同的ID。 這是一個不好的選擇，因為您無法知道哪個復選框代表哪個項目。

另一種方法是為每個復選框分配一個單擊處理程序，以在單擊該復選框時立即得到通知。

（我通過使用continuation和forEach而不是for來簡化了復選框的創建代碼）

teams.forEach((team) {
  var input = new InputElement()
    ..type = "checkbox"
    ..id = "player"
    ..onClick.listen((e) {
      print('${cb.id} {cb.checked}');
    });
  teamplayer
    ..append(input)
    ..appendText(team)
    ..appendHtml("<br>");
}

在這種情況下，當選擇更改時，您可能需要重置點擊通知。

import 'dart:async';
// ...
final subscriptions = <StreamSubscription>[];
// ...
subscriptions
  ..forEach((s) => s.cancel())
  ..clear();
teams.forEach((team) {
  var input = new InputElement()
    ..type = "checkbox"
    ..id = "player";
  subscriptions.add(input.onClick.listen((e) {
      print('${cb.id} {cb.checked}');
    }));
  teamplayer
    ..append(input)
    ..appendText(team)
    ..appendHtml("<br>");
}

注意：代碼未經測試，並且我使用復選框已有一段時間。