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