Невозможно вызвать переключатель Core Collapse внутри повторяющегося полимера шаблона.

Я пытаюсь переключить панель сворачивания ядра, вызываемую внутри повторяющегося элемента шаблона. Я предоставил динамический идентификатор элементу свертывания ядра, но при нажатии он говорит: Uncaught TypeError: boolean is not a function

Мой код:

<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>

Мне нужно переключить соответствующий элемент свертывания при нажатии.


javascript polymer
person Micro Ice    schedule 04.04.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

хорошо 1 проблема заключается в том, что цель клика / касания имеет тот же идентификатор, что и крах. это вызовет проблему выбора.

что вы можете сделать, это поместить весь повторяющийся шаблон в div и присвоить ему идентификатор. я назову это "все".

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

надеюсь это поможет

person jimi dough10    schedule 04.04.2015
comment
Спасибо за ваш ответ. Я изменил код в соответствии с ответом, но теперь у меня другая проблема. «Uncaught TypeError: невозможно прочитать свойство «переключить» на ноль» - person Micro Ice; 04.04.2015
comment
Я решил проблему. Просто сделал небольшое изменение в вашем коде. Вместо получения iid с помощью sender.ident я назвал var iid = e.target.templateInstance.model.cardID; . Эта работа идеально подходит для меня. Спасибо :) - person Micro Ice; 04.04.2015
comment
рад, что у тебя получилось. sender.ident работал у меня в хроме. ты в хроме работаешь? вы также можете использовать sender.attributes.ident.value; - person jimi dough10; 04.04.2015
comment
Нашел другое решение. Поскольку вы были правы в том, что установили один и тот же идентификатор для кнопки paper и core-collapse, это было основной причиной ошибки. После удаления идентификатора из бумажной кнопки весь мой код работает отлично. Я трачу всю свою неделю на эту маленькую проблему. - person Micro Ice; 04.04.2015