Question

我有这样的聚合物元素：

<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不起作用。

Answer 1

您可以使用undoc＆quot;注入绑定HTML（）

示例：

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

免责声明 - 这已由其他地方的聚合物团队回答了SO

Answer 2

来自Polymer docs

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

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

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

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

重要说明：由于此处的Polymer调用不在此处，因此必须包含标记名称参数。

如何动态创建聚合物元素\简单标签

2 个答案: