如何在Volt中實現客戶端JavaScript（jQuery.animate）？

我很難理解如何處理伏特前端事件，並希望這個具體問題可以幫助啓發我。如何在Volt中實現客戶端JavaScript（jQuery.animate）？

我通過網絡直播實現了簡單的聊天程序，並希望在其上構建它。具體而言，我希望在填充聊天窗口時，聊天窗口保持滾動到底部。我認爲關鍵是jquery .animate（{scrollTop：...}）方法，但我不明白如何以伏特形式實現它。有人能啓發我嗎？

我第一次嘗試是在控制器 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的運行的「scroll_bottom」的方法，但所述可變返回NaN。

景觀是在這裏： https://github.com/mmattthomas/chat/blob/master/app/main/views/main/index.html

即使這個具體的例子並沒有解決整個問題（什麼？如果別人增加了聊天，什麼事件可以激活聊天窗口的底部） - 因此如何最好用伏特來實施這個客戶端操作？

來源

2015-07-20 Matt Thomas

那麼，關於Volt的一個好消息就是它使用OpalRb來進行客戶端工作。要在Volt中運行類似jQuery的東西，我認爲使用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，我已經實現了這個問題，你可以檢查出的修復程序。

來源

2015-08-04 13:57:24 GDP2

謝謝你這個工作。出於某種原因，我似乎並不需要'require'jquery'行（只有'require'opal-jquery''）。現在我開始明白，控制器和視圖之間的界限是模糊的，而opal可以在控制器內使用。 –

@MattThomas很高興幫助:) – GDP2

如何在Volt中實現客戶端JavaScript（jQuery.animate）？

回答

相關問題