Tidak dapat memanggil tombol Core Collapse di dalam Template repeat Polymer

Saya mencoba untuk mengaktifkan panel keruntuhan inti yang disebut di dalam elemen templat berulang. Saya telah memberikan ID dinamis ke elemen keruntuhan inti tetapi di ketuk tertulis: Uncaught TypeError: boolean is not a function

Kode saya adalah:

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

Skrip saya adalah:

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

Saya perlu mengaktifkan elemen ciutkannya masing-masing di ketukan.


javascript polymer
person Micro Ice    schedule 04.04.2015    source sumber

Jawaban (1)


arrow_upward
1
arrow_downward

baik 1 masalahnya adalah target klik / ketuk memiliki id yang sama dengan runtuhnya. itu akan menyebabkan masalah pemilihan.

yang dapat Anda lakukan adalah meletakkan seluruh templat berulang di dalam div dan memberinya id. saya akan menyebutnya "semua".

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

ubah atribut id target klik Anda ke yang lain tidak peduli apa itu. saya akan memanggil atribut "ident"

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

maka fungsi Anda akan terlihat seperti itu

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

semoga ini membantu

person jimi dough10    schedule 04.04.2015
comment
Terimakasih atas tanggapan Anda. Saya mengubah kode sesuai jawabannya tetapi sekarang saya mendapatkan masalah yang berbeda. 'TypeError Tidak Tertangkap: Tidak dapat membaca properti 'toggle' dari null' - person Micro Ice; 04.04.2015
comment
Saya memecahkan masalah ini. Baru saja membuat sedikit perubahan pada kode Anda. Sebagai ganti mendapatkan iid oleh sender.ident saya menelepon var iid = e.target.templateInstance.model.cardID; . Ini bekerja sempurna untuk saya. Terima kasih :) - person Micro Ice; 04.04.2015
comment
senang Anda berhasil. sender.ident telah bekerja di chrome untuk saya. apakah kamu bekerja di chrome? Anda juga bisa menggunakan sender.attributes.ident.value; - person jimi dough10; 04.04.2015
comment
Menemukan solusi lain. Karena Anda benar tentang menetapkan id yang sama untuk tombol kertas dan keruntuhan inti adalah penyebab utama kesalahan. Setelah menghapus id dari tombol kertas, seluruh kode saya berfungsi dengan baik. Saya menghabiskan seluruh minggu saya untuk masalah kecil ini. - person Micro Ice; 04.04.2015