Polymer 如何动态创建聚合元素\简单标记

我有这样一种聚合物元素：

<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>

<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>

+
情态动词
/*聚合物*/
聚合物({
就绪：函数（）{
this.showModal=false；
},
showMdl：函数（e、详细信息、发送方）{
this.showModal=true；
这个$.modal.style.top=e.layerY+'px'；
这个$.modal.style.left=e.layerX+'px'；
var newElement=document.createElement（'div'）
newElement.innerHTML='dynamicllyElement'；
setAttribute（'on-click'，'{{clickOnDynamiclyElement}}'）；
此.$.modal.appendChild（新元素）；
},
单击DynamiclyElement:函数（）{
console.log（'1111'）
}
});

---

单击OnDynamiclyElement

不起作用。

您可以使用undoc'd injectBoundHTML（）

例如：

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

this.injectBoundHTML（'dynamiclyelement'，this.$.modal）；

免责声明-Polymer团队已在Polymer文档中的其他地方回答了此问题

强制登记 元素可以在纯JavaScript中注册，如下所示：

<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>

<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>

聚合物（'name-tag'，{nameColor:'red'}）；
var el=document.createElement（'div'）；
el.innerHTML\
\
\
你好{{name}\
\
';
//自定义元素polyfill无法看到
//除非你把它放在DOM里。
文件.正文.附件（el）；

您需要将添加到文档中，以便自定义元素polyfill拾取它

---

重要提示：由于此处的Polymer调用不在范围内，因此必须包含tag name参数。

注意：我的回答可能有点过头了。最好只使用

newElement.addEventListener（'click'，this.clickOnDynamiclyElement.bind（this））