Aurelia의 읽기 전용 DOM 속성에 바인딩하기

Question

나는 Aurelia와 PDF.JS를 통합하려고하는데 현재 스크롤 바인딩 동작 (사용자가 문서를 스크롤 할 때 페이지를로드하고 값을 업데이트하기 위해) 작업을하고 있습니다.

이 작업을 수행하기 위해 offsetTop 속성 인 canvas 요소를 바인딩하기로 결정했습니다. 내 태그는 다음과 같습니다

<canvas repeat.for="page of numPages" offset-top.bind="offsetTop[page + 1]" id="${'pdfCanvas' + (page + 1)}"></canvas> 

내가 이것을 실행하려고하면 문제는, 내가이 오류 메시지가 도착한다 :

Uncaught (in promise) TypeError: Cannot assign to read only property 'offsetTop' of object '#<HTMLCanvasElement>'. 

내 질문이입니다 - A와 결합 할 수있는 방법이 "읽기 전용 모드"의 속성? 나는 (오프셋 위치에 따라 페이지 변경을 할 수 있도록) 변경 사항을 모니터링하려고하지만 쓰기를 원하지 않습니다. 이것이 가능한가?

감사합니다.

Answer 1

현재 바인딩 식에서 "이 요소 속성을 더러워보고 싶습니다."라는 기본 제공 방법이 없습니다. 그래도 우리의 backlog에 있습니다.

구체적인 경우 (scrollTop) 속성과 관련된 DOM 이벤트가 있기 때문에 더티 검사보다 더 잘 할 수 있습니다.

스크롤 컨테이너 요소 (overflow: scroll이있는 요소)를 찾아서 ref 특성을 사용하여 이름을 지정하십시오. 그런 다음 trigger을 사용하여 scroll 이벤트에 바인딩합니다. 트리거 표현식은 스크롤 컨테이너 요소의 현재 scrollTop을보기 모델에 지정해야합니다. 스크롤 이벤트에서 많은 작업을 수행하는 것과 관련된 perf/chop 문제를 피하려면 throttle 바인딩 동작을 사용하는 것이 좋습니다.

<div ref="myDiv" scroll.trigger="scrollTop = myDiv.scrollTop & throttle"> 

    ... 

</div> 

https://gist.run/?id=db47a4f26f48e17250f2812ad159ea28