[英]How to implement client-side javascript (jquery .animate) in Volt?
我在掌握如何处理伏特的前端事件时遇到了麻烦,希望这个特定的问题能对我有所启发。
我实现了来自网络广播的简单聊天程序,并希望以此为基础。 具体来说,我希望聊天窗口在填充聊天窗口时始终滚动到底部。 我认为关键是jquery .animate({scrollTop:...})方法,但我不知道如何以伏特实现。 有人可以启发我吗?
我的第一次尝试是控制器中的“ scroll_bottom”方法https://github.com/mmattthomas/chat/blob/master/app/main/controllers/main_controller.rb#L30-L36
def scroll_bottom
`
var newscrollHeight = $('.panel-body').attr('scrollHeight') - 20;
//alert('newscrollHeight:' + newscrollHeight);
$('.panel-body').animate({ scrollTop: newscrollHeight }, 'normal');
`
end
javascript运行,但是变量返回NaN。
视图在这里: https : //github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html
即使这个特定的示例也不能解决整个问题(如果其他人添加到聊天中,什么事件可以使聊天窗口动画到底部?)-那么如何最好地使用volt来实现此客户端操作?
好吧,了解Volt的一件好事是它使用OpalRb进行客户端工作。 为了在Volt中运行类似jQuery的东西,我认为使用Opal包装器是最简单的,它允许使用Ruby访问jQuery之类的库。
使用opal-jquery包装器,我将实现jQuery动画,如下所示:
panel_body = Element.find(".panel-body")
panel_body.animate({ scrollTop: panel_body.children.height }, speed: "normal")
编辑:
这是您项目的一个分支 ,我已在其中实施了一个针对此问题的修复程序,您可以检出该修复程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.