如何在Volt中实现客户端javascript（jquery .animate）？

Question

I'm having trouble grasping how to deal with front end events in volt, and hopefully this specific question could help enlighten me.

I implemented the simple chat program from the webcast and wanted to build on it. Specifically I want the chat window to stay scrolled to the bottom as the chat window is populated. I think the key is the jquery .animate({ scrollTop:...}) method, but I don't understand how to implement that in volt. Could someone enlighten me?

My first attempt is the "scroll_bottom" method in the controller 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

The javascript runs, but the variable returns NaN.

View is here: https://github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html

Even this specific example doesn't solve the whole problem (what if someone else adds to the chat, what event can animate the chat window to the bottom?) - so how best to implement this client-side action with volt?

Answer 1

Well, one good thing to know about Volt is that it uses OpalRb for client-side workings. To run something like jQuery in Volt, I think it would be easiest to use an Opal wrapper , which allow access of libraries like jQuery with Ruby.

Using the opal-jquery wrapper, I would implement a jQuery animation like so:

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

EDIT:

Here is a fork of your project where I have implemented a fix for this issue that you can check out.