Polymer: dom-repeat - 항목이 변경/삭제된 경우 런타임 중에 업데이트된 스타일이 재설정되지 않습니다.

에 만든 2018년 01월 10일 · 3코멘트 · 출처: Polymer/polymer

설명

라이브 데모

https://jsfiddle.net/hcdvqa9d/2/
=> "초 삭제"를 클릭합니다. 이름이 "Bob" 항목에 대해서만 설정되어 있어도 다른 이름에 대해서는 빨간색으로 유지됩니다.

번식 단계

updateStyles를 통해 CSS를 변경하는 dom-repeat 내부에 요소를 만듭니다.
한 요소가 삭제되면 해당 위치를 차지하는 요소(예: 삭제 #5, #6이 #5가 됨)는 삭제된 개체의 CSS 스타일을 갖게 됩니다.

예상 결과

더 이상 동일한 항목이 아니므로 스타일이 재설정됩니다.

실제 결과

스타일은 삭제된 항목과 동일하게 유지됩니다. 이것이 정말로 원하는 행동입니까?

영향을 받는 브라우저

[x] 크롬
[x] 파이어폭스
[?] 가장자리
[?] 사파리 9
[?] 사파리 8
[x] IE 11

버전

폴리머: v1-2
웹 구성 요소: v2

출처

derhuebiii

모든 3 댓글

보고 있는 것은 실제로 원하는 동작입니다. <dom-repeat> 작동 방식

배열을 변경할 때마다 <dom-repeat> 렌더링되고 "전체 새로 고침"이 수행됩니다.

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

이 "전체 새로 고침"에서는 더 나은 성능을 달성하기 위해 이미 존재하는 템플릿 인스턴스를 재사용하고 새 데이터를 제공합니다. 귀하의 경우 이로 인해 각 MyInnerElement#data 속성이 새 값으로 설정됩니다. 관찰자를 설정하여 속성 변경에 반응하기만 하면 작동합니다. https://jsfiddle.net/hcdvqa9d/3/

MajorBreakfast 에 2018년 01월 15일

👍1

BTW 색상을 설정하기 위해 this.updateStyles({ color }) 를 사용할 필요가 없으며 this.style.color 직접 설정할 수 있습니다. updateStyles() 는 CSS 사용자 정의 속성을 설정하는 데만 필요합니다.

MajorBreakfast 에 2018년 01월 15일

👍1

@MajorBreakfast 가 절대적으로 맞습니다. 성능상의 이유로 요소를 재사용합니다. 업데이트된 JSFiddle에 따라 스타일을 업데이트하려면 데이터 변경 사항에 반응해야 합니다.

dom-repeat 요소의 리스탬핑을 위해 #4957에서 PR이 열려 있는 #1713이 제출되었습니다. 따라서 dom-repeat 의 restamp 속성에 대한 수정/보류 중인 중복으로 이 문제를 닫습니다.

TimvdLippe 에 2018년 01월 27일

👍1

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급