removing polymer elements in dart

Question

i am adding polymer elements. i want to remove the element(self) on click on its(own) image. as per encapsulation i will have to make the parent delete the child. but this requires requires generating polymer elements for the parent too( am i right here??). children.add not defined for polymer elements.how do i do this, i plan to do some checks before adding the polymer element to the form .

Already read: How to remove a child component with a delete button in the child itself

How do I fire a custom event from Polymer Dart?

How do you dispatch and listen for custom events in Polymer?

what do i pass through dispatch event??

init-item.html

<polymer-element name="init-item" >
  <template>
    <input type="image" src="button_minus_red.gif" on-click="{{remove}}" width = "15" height ="15">
    {{Name}}<br> 
  </template>
  <script type="application/dart" src="init-item.dart"></script>
</polymer-element>

init-item.dart

@HtmlImport('init-item.html')
import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';
@CustomTag('init-item')
class PItem extends PolymerElement{
  @observable String Name='hello';
  void remove(){
    Name='';

  }

so presently on clicking the image the name attribute gets reset. but this happens only on a subsequent click event generated from main.dart. This is due to data binding. how do i initiate two way data binding.??

main.html (polymer tags not added inspite of suggestion. couldnt figure it out)

...
<form  id="youritems">
</form>
...

Polymer items added to above tag.

main.dart

...
main() async{
.. initPolymer().then((_) {});
}
..
...{..
var input = new InputElement(type:"image");
input.onClick.listen((p){
            p.preventDefault();
            populateYourPlayers(teams[i]);
          });
}
void populateItems(String name){
  Polymer.onReady.then((_) { 
    var pl = new Element.tag('player-item');
    pl.playerName = name;
    yourPlayer.children.add(pl);
    });
}
..

Günter Zöchbauer Günter Zöchbauer · Accepted Answer · 2015-04-11T13:04:26

If you rename the click handler from remove to for example removeItem then you can just call remove() within the handler and it will work.

<input type="image" src="button_minus_red.gif" on-click="{{removeItem}}" width = "15" height ="15">

void removeItem(){
  Name='';
  remove(); // removes the init-item (self)
}

remove is an existing method on all elements. If you name your own method remove you override the default remove method and the original can't be called anymore (except from within your element with super.remove();)

removing polymer elements in dart

1 Answers