无法在模板重复聚合物中调用 Core Collapse 切换

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

第一个问题是点击/点击目标与折叠具有相同的 ID。这将导致选择问题。

你可以做的是将整个重复模板放在 div 中并给它一个 ID。我将其命名为 "all"。

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

将您的点击目标的 id 属性更改为其他内容，它是什么并不重要。我将调用属性 "ident"

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

希望这对您有所帮助

无法在模板重复聚合物中调用 Core Collapse 切换

Unable to call Core Collapse toggle inside Template repeat Polymer

javascript

polymer