Aureliaの読み込み専用DOMプロパティにバインドします。

Question

PDFを使用したAureliaとの統合に取り組んでいます。現在、スクロールバインディングの動作（ユーザーがドキュメントをスクロールしたときにページをロードして値を更新する）に取り組んでいます。

これを達成するために、canvas要素のoffsetTopプロパティにバインドすることにしました。私のマークアップは次のようになります。

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

私の質問はこれです - に結合する方法があります「読み取り専用モード」のプロパティ私は、オフセットの位置に基づいてページの変更を駆動できるように、変更のプロパティを監視したいと思いますが、書きたいとは思いません。これは可能ですか？

ありがとうございます！

Answer 1

現在、バインディング式に「この要素のプロパティをダーティにチェックします」と言うビルトイン方法はありません。しかし、我々のbacklogにあります。

特定のケース（scrollTop）では、プロパティに関連付けられたDOMイベントがあるため、ダーティーチェックよりも優れています。

「スクロールコンテナ」要素（overflow: scrollの要素）を探し、ref属性を使用して名前を付けます。次に、scrollイベントをバインドするtriggerを使用してバインドします。トリガ式は、スクロールコンテナ要素の現在のscrollTopをビューモデルに割り当てます。スクロールイベントで多くの作業を行うことに関連するperf/chopの問題を避けるには、throttleバインディング動作を使用することができます。

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

    ... 

</div> 

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