CODEWITHSUNDEEP
polymer
kysonic
kysonic

Reputation: 147

How to create dynamically polymer element\simple tag

I have a polymer-element like this:

<polymer-element name="x-block" attributes="data">
    <template>
        <div class="block-wrapper">
            <div class="plus-button"on-click="{{showMdl}}">+</div>
            <div hidden?="{{!showModal}}" id="modal">
                Modal
            </div>
            <content select="header"></content>
        </div>

    </template>
    /*Polymer */
    <script>
        Polymer({
            ready: function(){
                this.showModal = false;
            },
            showMdl: function(e,detail,sender){
                this.showModal = true;
                this.$.modal.style.top = e.layerY+'px';
                this.$.modal.style.left = e.layerX+'px';
                var newElement = document.createElement('div')
                newElement.innerHTML = 'dynamicllyElement';
                newElement.setAttribute('on-click','{{clickOnDynamicllyElement}}');
                this.$.modal.appendChild(newElement);
            },
            clickOnDynamicllyElement:function(){
                console.log('1111')
            }
        });
    </script>
</polymer-element>

clickOnDynamicllyElement does not work.

Upvotes: 1

Views: 1487

Answers (2)

sesteva
sesteva

Reputation: 1776

From the Polymer docs

https://www.polymer-project.org/docs/polymer/polymer.html#imperativeregister

Registering imperatively Elements can be registered in pure JavaScript like this:

<script>
  Polymer('name-tag', {nameColor: 'red'});
  var el = document.createElement('div');
  el.innerHTML = '\
   <polymer-element name="name-tag" attributes="name">\
     <template>\
       Hello <span style="color:{{nameColor}}">{{name}}</span>\
     </template>\
   </polymer-element>';
  // The custom elements polyfill can't see the <polymer-element>
  // unless you put it in the DOM.
  document.body.appendChild(el);
  </script>

You need to add the to the document so that the Custom Elements polyfill picks it up.

Important: Since the Polymer call here is outside the , it must include the tag name argument.

Upvotes: 0

sfeast
sfeast

Reputation: 956

You can use the undoc'd injectBoundHTML()

Example:

this.injectBoundHTML('<div on-click="{{clickOnDynamicllyElement}}">dynamicllyElement</div>', this.$.modal);

Disclaimer - this has been answered by the Polymer team elsewhere on SO

Upvotes: 1

Related Questions