1

ボルトでフロントエンドイベントを処理する方法を理解するのに苦労しています.この特定の質問が私を啓発するのに役立つことを願っています.

Web キャストから簡単なチャット プログラムを実装し、その上に構築したいと考えました。具体的には、チャット ウィンドウにデータが入力されている間、チャット ウィンドウを一番下までスクロールしたままにしておきます。キーは 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 で実装するにはどうすればよいでしょうか?

4

1 に答える 1

0

Volt について知っておくとよいことの 1 つは、クライアント側の動作にOpalRbを使用することです。Volt で jQuery のようなものを実行するには、Ruby で jQuery のようなライブラリにアクセスできるOpal ラッパーを使用するのが最も簡単だと思います。

opal-jqueryラッパーを使用して、次のように jQuery アニメーションを実装します。

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

編集：

これは、この問題の修正を実装したプロジェクトのフォークであり、チェックアウトできます。

于 2015-08-04T13:57:24.130 に答える