ポリマーが、私は、ポリマーに新たなんだカスタム要素の子

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が解雇されなければならないと私は、あなたが見ることができるようにメッセージをコンソールしようとしましたが、何のイベントはあなただけのindex.htmlファイルの一部を示して任意のアドバイス

Answer 1

を解雇しませんでした<template is="dom-bind">の中にあなたが出したコンテンツは？

ポリマーはデータバインディングやイベントなどでは機能しません。

最近の記事（Google I/O 2016に続く）や遅延読み込みに関する議論など、私はDOMバインドアプローチの使用を中止し、スタイリングを含むすべての機能を内部に持つ単一のカスタム要素を持っています。