绑定到Aurelia的只读DOM属性

Bind to read-only DOM property in Aurelia

本文关键字：DOM 属性 只读 Aurelia 绑定      更新时间：2023-09-26

我正致力于将PDF.JS与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>'.

我的问题是-有一种方法绑定到"只读模式"的属性?我想监视属性的更改(这样我就可以根据偏移量定位驱动页面更改)，但我不想写入它。这可能吗?

谢谢!

目前我们还没有一个内置的方法来在绑定表达式中表示"我想脏检查这个元素的属性"。但这在我们的待办事项中。

在您描述的特定情况下(scrollTop)，我们可以做得比脏检查更好，因为有一个DOM事件与属性相关联。

找到"滚动容器"元素(overflow: scroll)，并使用ref属性给它一个名称。然后使用trigger绑定到它的scroll事件。触发器表达式应该将滚动容器元素的当前scrollTop分配给视图模型。您可能希望使用throttle绑定行为来避免在滚动事件中执行大量工作相关的perf/chop问题。

<div ref="myDiv" scroll.trigger="scrollTop = myDiv.scrollTop & throttle">
   ...
</div>
https://gist.run/?id=db47a4f26f48e17250f2812ad159ea28

相关文章：