如何在 Volt 中实现客户端 javascript (jquery .animate)？

Question

我无法掌握如何处理伏特中的前端事件，希望这个具体问题能帮助启发我。

我实现了网络广播中的简单聊天程序，并希望以此为基础进行构建。具体来说，我希望聊天 window 在填充聊天 window 时保持滚动到底部。我认为关键是 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运行，但是变量returnsNaN。

视图在这里： https://github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html

即使这个具体的例子也不能解决整个问题（如果其他人添加到聊天中怎么办，什么事件可以使聊天动画 window 到底部？） - 那么如何最好地实现这个客户端伏特的侧面动作？

Answer 1

嗯，关于 Volt 的一件好事是它使用 OpalRb for client-side workings. To run something like jQuery in Volt, I think it would be easiest to use an Opal wrapper，它允许访问像 jQuery 和 Ruby 这样的库。

使用 opal-jquery 包装器，我将实现一个 jQuery 动画，如下所示：

panel_body = Element.find(".panel-body")
panel_body.animate({ scrollTop: panel_body.children.height }, speed: "normal")

编辑：

Here is a fork of your project 我已经针对此问题实施了修复，您可以查看。

如何在 Volt 中实现客户端 javascript (jquery .animate)？

How to implement client-side javascript (jquery .animate) in Volt?

javascript

voltrb