Question

我正在尝试切换在重复模板元素内部调用的核心折叠面板。我已经为核心折叠元素提供了动态ID，但是点击它说：Uncaught TypeError：boolean不是函数

我的代码是：

<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属性更改为其他内容，它实际上无关紧要。我将调用属性“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切换

1 个答案: