聚合物手柄click事件

Question

我是新的聚合物，我有一個包含一個簡單的疊加，我想一個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">內顯示的內容？

聚合物不適用於數據綁定和事件等，除非這些東西是。

這些天（關於Google I/O 2016）和關於延遲加載等的討論我已經停止使用dom綁定方法，而是擁有一個自定義元素，然後包含所有功能，包括樣式。