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

我有一个聚合物元素是这样的：如何创建动态聚合物元件简单的标签

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

来源

2014-10-28 user3576614

可以使用undoc'd injectBoundHTML（）

例子：

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

免责声明 - 这已经由高分子团队回答了其他地方SO

来源

2014-10-28 19:43:33 sfeast

注意：我的答案可能是矫枉过正。最好只使用 'newElement.addEventListener（'click'，this.clickOnDynamicllyElement.bind（this））;' Scott聚合物小组解释了这里（https://groups.google.com/forum） /＃！msg/polymer-dev/I5t73SGLLNc/UlYvEa508pkJ）只有当您确实需要绑定动态HTML数据时，才会使用injectBoundHTML，而不是仅仅监听事件。 – sfeast 2014-10-29 20:30:47

从聚合物文档

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>

您需要添加到文档中，以便自定义元素填充工具捡起来。

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

来源

2014-10-29 03:10:03 sesteva

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

回答

相关问题