2015-04-04 44 views
0

我想切換核心摺疊面板內部重複模板元素。我已經提供了動態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> 

我需要在水龍頭上切換其各自的摺疊元素。

回答

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(); 
    } 

希望這有助於

+0

感謝您的答覆。我根據答案更改了代碼,但現在我遇到了不同的問題。 '未捕獲TypeError:無法讀取屬性'切換'null' – 2015-04-04 15:19:54

+0

我解決了這個問題。只是在你的代碼中做了一些改動。代替通過sender.ident獲取iid,我調用了'var iid = e.target.templateInstance.model.cardID;'。這項工作對我來說很完美。感謝:) – 2015-04-04 15:26:18

+0

很高興你得到它的工作。 sender.ident已經爲我工作了。你在鉻合金工作嗎?你也可以使用sender.attributes.ident.value; – 2015-04-04 15:28:57