Dynamically instantiate, add polymer elements dart

Question

Trying to dynamically add polymer elements on the click event not able to add the element

tried using initPolymer (resulting in stack error :element already initialized)

4 files.

item.html

<polymer-element name="init-item" >
  <template>
    <input type="image" src="button_minus_red.gif" on-click="{{remove}}">
    {{Name}}

  </template>

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

item.dart:

import 'package:polymer/polymer.dart';

@CustomTag('init-item')
class Item extends PolymerElement{
  @observable String Name='hello';
  void remove(){
    Name='';
  }
  PlayerItem.created(): super.created(){}
}

index.dart:

      import 'package:polymer/polymer.dart';
        import 'item.dart'

        // getting unused warning for item.dart

        main() async{....
    //init moved to main
    initPolymer().then((_) {});
    }

//adding to form element on click event
Code to run(click event)
{   //onReady added here
    Polymer.onReady.then((_) { yourPlayer.children.add(new Element.tag('player-item')) ;});

        }

tag added to index.html and also dynamic addition as shown above.

Due to above changes when page reloaded was automatically getting custom element included. Removed the element form the index.html works as expected (no Errors)

Previous error: when used initPolymer element added in place of tag and also within form. on subsequent click events added within form but stack error(initialization already done)

Are there any issues due to async(highly false)? How should I approach this?

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

item is not a valid Polymer- or Custom Element name. It is a requirement that custom elements must have a dash in their name like my-item.

At the top of your question you write about a click event but the code example at the bottom shows you're doing it from main(). This two things are quite different. If you call the code in the click handler of a Polymer element it should just work. If you have a custom main you need to ensure Polymer is initialized properly before you instantiate elements.

See https://stackoverflow.com/a/20982658/217408 for more details.

import "package:polymer/polymer.dart";

main() {
  initPolymer().then((zone) => zone.run(() {
    Polymer.onReady.then((_) {  
      var yourPlayer = querySelector('#people');
      yourPlayer.children.add(new Element.tag('player-item'));
    });
  }));
}

edited May 23 '17 at 11:58

Community

1
1

answered Apr 09 '15 at 20:14

Günter Zöchbauer

623,577
216
2,003
1,567

Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74970/discussion-between-user1869714-and-gunter-zochbauer). – Hemant Apr 10 '15 at 20:23
I dont' know how you proceeded. Depending on where your click handler and your Polymer element is, either `querySelector('init-item').remove()` or `shadowRoot.querySelector('init-item').remove()` should work. I'm about to go to bed. If this doesn't do what you want, please create a new question which shows what your code looks like now and I'll have look in the morning. – Günter Zöchbauer Apr 10 '15 at 20:42
Sir, new question posted http://stackoverflow.com/questions/29577881/removing-polymer-elements-in-dart – Hemant Apr 11 '15 at 12:29

Dynamically instantiate, add polymer elements dart

1 Answers1