在Aurelia中绑定为只读DOM属性

我正在将PDF.JS与Aurelia集成，并且我正在研究滚动绑定行为（用于在用户滚动文档时加载页面和更新值）。在Aurelia中绑定为只读DOM属性

为了做到这一点，我决定绑定到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>'.

我的问题是 - 有绑定到一个方法财产在“只读模式”？我想监视属性的更改（以便我可以根据偏移量定位驱动页面更改），但我不想写入它。这可能吗？

谢谢！

来源

2016-08-24 jedd.ahyoung

目前我们没有内置的方式来在绑定表达式中说“我想脏检查这个元素属性”。不过，它在我们的backlog上。

在你描述过的特定情况（scrollTop）中，我们可以比脏检查做得更好，因为有一个与事件相关的DOM事件。

找到“滚动容器”元素（带有overflow: scroll的元素）并使用ref属性为其命名。然后使用trigger绑定到它的scroll事件。触发器表达式应该将滚动容器元素的当前scrollTop赋值给视图模型。您可能希望使用绑定行为来避免与在滚动事件中执行大量工作相关的perf/chop问题。

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

    ... 

</div>

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

来源

2016-08-24 22:46:55

疑难杂症。我想过这个方法（在容器中，我有一个'scroll.trigger'，但问题是我需要可滚动容器中的子节点的offsetTop属性。使用这种方法你描述了，我必须引用我的viewmodel中的所有容器子元素，并在滚动处理函数内部使用scrollTop和每个子元素的偏移量，这是我希望避免的，因为它不会很好地扩展。 –

在Aurelia中绑定为只读DOM属性

回答

相关问题