来自自定义元素子元素的聚合物处理点击事件

Question

我是 Polymer 的新手，我有一个包含 simple-overlay 的 dom-repat 自定义元素，我希望在单击关闭按钮时该覆盖应该关闭

这是自定义元素

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../overlay-layer/simple-overlay.html">

<dom-module is="feed-bdy">

   
    <template items="{{items}}">
       <style include="iron-flex iron-flex-alignment" >  
      :host{
      --paper-button-ink-color: var(--paper-pink-a200);
        --paper-button{
          background-color: red !important;
          color: red;
        }

      }
      .custom{
        color: red;
      }
       .content-bdy{
        min-height: 120px;
        }
        .scrollable{
           @apply(--layout-scroll);
           max-width: 75%;
  
        }
    
   </style>
      <div class="card-content">
         <div class="ar-header">
            <h3><a href="#">  [[items.fields.title]]</a></h3>
         </div>
         <div class="content-bdy"></div>
      </div>
      [[_renderHTML(items)]]
      <div class="card-actions">
         <paper-button  class="custom" id="ar-[[items.fields.articleId]]" on-click="_openOverlay">إقراء المزيد !</paper-button>
         <simple-overlay id="backdrop-[[items.fields.articleId]]" data-ar="backdrop-[[items.fields.articleId]]" with-backdrop class="layout scrollable">
         
          [[_renderFullArticle(items)]]
        
          <button  id="dd">Close</button>
          </simple-overlay>
         <paper-button>
            شارك 
            <iron-icon icon="reply"></iron-icon>
         </paper-button>
      </div>

   </template>
  
   <script>
      Polymer({
       is: 'feed-bdy',
       listeners :{
        'dd.click':'_closeOverlay'
       },
       _renderHTML: function(items) {
        // firstp to get only the first pargarph to put in the home page
        var ss= items.fields.body;
        //console.log(this.$$(".card-content"));
        var firstp = ss.substring(0,ss.search("</p>")+4);
        this.$$(".content-bdy").innerHTML += firstp;
        
        
       },
       _renderFullArticle : function(items){
        this.$$("simple-overlay").innerHTML +=items.fields.body;

       },
       _toggle : function(e){
        var id = Polymer.dom(e).localTarget.title;
        //console.log(id);
        var moreInfo = document.getElementById(id);
       // console.log(moreInfo);
        var iconButton = Polymer.dom(e).localTarget;
             iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-up'
                                               : 'hardware:keyboard-arrow-down';
            moreInfo.toggle();
       },
       _openOverlay : function(e){
        //console.log('calling _openOverlay');
        var id = Polymer.dom(e).localTarget.id.split('ar-')[1];
        var dd = document.getElementById('backdrop-'+id);
        dd.open();
       },
       _closeOverlay : function(e){
        console.log(Polymer.dom(e));
        console.log('calling _openOverlay');
        var id = Polymer.dom(e).localTarget.id.split('ar-')[1];
       // var dd = document.getElementById('backdrop-'+id);
       /// dd.close();
       }
      });
   </script>
</dom-module>

并在 index.html 中

<div class="video layout horizontal around-justified wrap" >
                      
  <template is="dom-repeat" items="[[ajaxResponse]]" >
    
  <paper-card image="[[item.fields.image]]" class="flex-auto" wide-layout$="{{wide}}">
          

         <feed-bdy items="[[item]]"></feed-bdy>
  </paper-card>
        </template>
      </div>

所以当点击关闭按钮时，_closeOverlay 应该被触发，我尝试控制台消息，如你所见，但没有触发任何事件的任何建议

Answer 1

您只显示了 index.html 文件的一部分，但您在 <template is="dom-bind"> 中显示的内容是什么？

Polymer 不适用于数据绑定和事件等，除非这些东西是。

这些天来（在 Google I/O 2016 之后）以及关于延迟加载等的讨论，我已经停止使用 dom-bind 方法，而是使用一个自定义元素，然后在其中包含所有功能，包括样式。