Polymer: dom-repeat - gaya yang diperbarui selama runtime tidak disetel ulang jika item diubah/dihapus

Dibuat pada 10 Jan 2018 · 3Komentar · Sumber: Polymer/polymer

Keterangan

Demo Langsung

https://jsfiddle.net/hcdvqa9d/2/
=> Klik "Hapus Kedua". Nama tetap merah untuk nama lain, meskipun hanya disetel untuk item "Bob"

Langkah-langkah untuk Reproduksi

Buat elemen di dalam pengulangan dom yang mengubah CSS melalui updateStyles.
Ketika satu elemen dihapus, elemen yang mengambil posisinya (misalnya hapus #5, #6 menjadi #5) akan memiliki gaya CSS dari objek yang dihapus.

Hasil yang diharapkan

Gaya diatur ulang karena bukan item yang sama lagi.

Hasil nyata

Gaya tetap sama seperti untuk item yang dihapus. Apakah ini benar-benar perilaku yang diinginkan?

Peramban Terkena Dampak

[x] Chrome
[x] Firefox
[?] Tepian
[?] Safari 9
[?] Safari 8
[x] IE 11

Versi

Polimer: v1-2
komponen web: v2

Sumber

derhuebiii

Semua 3 komentar

Apa yang Anda lihat sebenarnya adalah perilaku yang diinginkan. Inilah cara kerja <dom-repeat> .

Setiap kali Anda mengubah array, <dom-repeat> merender dan melakukan "penyegaran penuh"

https://github.com/Polymer/polymer/blob/589684a5a45ed8907dd6d46479a015fd66fec845/lib/elements/dom-repeat.html#L518

Dalam "penyegaran penuh" ini, untuk mencapai kinerja yang lebih baik, menggunakan kembali contoh template yang sudah ada dan memberi mereka data baru. Dalam kasus Anda, ini menyebabkan setiap properti MyInnerElement#data disetel ke nilai baru. Bereaksi saja terhadap perubahan properti dengan menyiapkan pengamat dan itu berfungsi: https://jsfiddle.net/hcdvqa9d/3/

MajorBreakfast pada 15 Jan 2018

👍1

BTW Anda tidak perlu menggunakan this.updateStyles({ color }) untuk mengatur warna, Anda dapat mengaturnya melalui this.style.color secara langsung. updateStyles() hanya diperlukan untuk mengatur properti kustom CSS.

MajorBreakfast pada 15 Jan 2018

👍1

@MajorBreakfast sepenuhnya benar. Untuk alasan kinerja, kami menggunakan kembali elemen. Anda perlu bereaksi pada perubahan Data untuk memperbarui gaya, per JSFiddle yang diperbarui.

Untuk restamping elemen pengulangan dom, #1713 diajukan yang memiliki PR terbuka di #4957. Oleh karena itu saya menutup masalah ini sebagai duplikat tetap/tertunda untuk properti restamp pada dom-repeat .