内联Javascript变量作为Slim中元素属性的一部分

背景:

我使用skrollr插件作为Rails项目的一部分,该项目使用Slim进行标记.
该插件需要用于滚动动画的起点和终点的数据属性.这是一个例子:

#canvas-1 data-0="top:-80px;" data-1180="top:0px;"

该插件基本上将顶部css从data-0(滚动位置0px)动画到data-1180(滚动位置1180px).

题:

页面上需要设置动画的一些元素位于具有不同高度的容器下方.因此,data-xxxx可以根据前面容器中的内容而有所不同.我有一个javascript函数,它计算出所有前面元素的高度,并返回data-xxxx应该是什么的变量.理论上,这在Slim中的输出应该是什么样的:

#logo.unit data-#{ "<script>logoPosition</script>" }="top:5px" data-#{ "<script>logoPosition + 200</script>" }="top:-8px;"

修剪错误.无论我如何尝试添加内联javascript属性 – 它都是错误的.我目前的解决方案是所有javascript(完全取代了该属性).但是,我想知道内联javascript生成属性的正确方法.

可能?

最佳答案
如果我正确理解你,你可以单独使用skrollr.阅读有关相对模式https://github.com/Prinzhorn/skrollr#absolute-vs-relative-mode的文档

像这样(你明白了):

#logo.unit data-top="top:5px" data-200-top="top:-8px;"

使用data-anchor-target =“#logo.unit”你甚至可以让其他元素的动画取决于徽标的位置.

转载注明原文:内联Javascript变量作为Slim中元素属性的一部分 - 代码日志