无法调用模板重复内核折叠切换聚合物

Question

我想切换核心折叠面板内部重复模板元素。我已经提供了动态ID为核心坍缩元素，但自来水它说：遗漏的类型错误：布尔不是一个函数

我的代码是：

<template> 
    <template repeat="{{ data }}"> 
     <style> 
      ...... 
     </style> 
     <paper-shadow z="1" class="card"> 
      <span class="info-bar">{{ cardID }}</span> 
      <div vertical layout> 
       <div> 
        <div horizontal layout> 
         <div flex style="color:#757575;"> 
          <span>Date : </span><br /><span>March 15, 2015</span> 
         </div> 
         <div style="text-align:right;"> 
          <paper-icon-button flex icon="subject" style="color:#ed485c;" on-tap="{{ toggle }}" id="{{ cardID }}"></paper-icon-button> 
          <paper-icon-button flex icon="social:share" title="clear" style="color:#ed485c;"></paper-icon-button> 
         </div> 
        </div> 
       </div> 
       <core-collapse id="{{ cardID }}"> 
        <span> Collapse Content </span> 
       </core-collapse> 
      </div> 
     </paper-shadow> 
    </template> 
</template> 

我的脚本是：

<script> 
    Polymer('i-card', { 
     toggle: function (e, detail, sender) { 
      var iid = e.target.templateInstance.model.cardID; 
      this.shadowRoot.querySelector('#' + iid).toggle(); 
     }, 
     ready: function() { 
      this.data = this.getData(); 
     }, 
     getData: function() { 
      var data = []; 
      for (var i = 0; i < 100; i++) { 
       data.push({ 
        cardID : 'icard-' + Math.floor(Math.random()*(1000-1+1)+1), 
       }); 
      } 
      return data; 
     } 
    }); 
</script> 

我需要在水龙头上切换其各自的折叠元素。

Answer 1

嗯1问题是点击/点击目标具有与崩溃相同的ID。这将导致选择问题。

你可以做的是把整个重复模板放在一个div中并给它一个id。我会称之为“全部”。

<div id="all"> 
    <tempalte repeat="{{data}}"> 
    .... 
    </template> 
<div> 

将您的点击目标的id属性更改为其他内容，它确实无关紧要。我会打电话给属性“标识”

<paper-icon-button flex icon="subject" style="color:#ed485c;" on-tap="{{ toggle }}" ident="{{ cardID }}"></paper-icon-button> 

那么你的函数看起来像

toggle: function (event, detail, sender) { 
     var iid = sender.attributes.ident.value; 
     this.$.all.querySelector('#' + iid).toggle(); 
    } 

希望这有助于