在飞镖中勾选动态复选框/聚合物元素

Question

飞镖的新手，没有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> 

被修改达特代码： 目的是首先生成的选项然后选择它们中的一个，并且如果使图像点击（用于此目的的聚合物元件）随后将其删除。

穿过高分子榜样大师。但无法找到相关的东西。

需要帮助： 1.如何动态添加聚合物元素？

1. 如何将值（即本例中玩家的姓名）传递给动态添加的 聚合物元素？

2. 如何去除聚合物元素？

3. 如何删除通过* .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> 

，并基于该选择显示与复选框的形式。 我面临的问题是如何检测他们哪些复选框已被选中，如果是的话如何可以捕获该复选框的值。

可能重复 How to know if a checkbox or radio button is checked in Dart?

但是他们不复选框动态创建。

如果上述方法错误，请叮嘱。

Answer 1

的checked属性取决于当你要检测的选中状态有两种方法上。

您可以将点击处理程序添加到提交按钮，然后查询复选框。

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

目前要分配相同的ID给每个复选框。这是一个不好的选择，因为您无法知道哪个复选框代表什么项目。

另一种方法是为每个复选框分配点击处理程序，以便在单击复选框时立即得到通知。

（我简化您的复选框创建代码通过使用一点延续和foreach而不是为）

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

注意：代码没有经过测试，这是一段时间我使用复选框。

Answer 2

你可以阅读的CheckboxInputElement

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

    }