javascript - 使用 Rails 和 Haml 的 Jquery 和 CoffeeScript scrollTo

Question

我正在尝试使用 CoffeeScript Rails 和 Haml 执行一个非常简单的任务。我还没有经常使用 CoffeeScript，但我想试一试。

当用户按下按钮时，我希望 View 滚动到某个 div id。在我的页面顶部，我有一个这样的 ID:

#area_1

我的链接是这样的:

= link_to "Area", "#", id: "area_button_1"

在我自动生成的 CoffeScript 文件中，我有一个如下所示的函数:

$ ->
  scrollToArea = (button, area) ->
    $(button).click ->
      scrollTo(area, 800)

我尝试在我的一个 View 文件中调用此方法，如下所示:

:javascript
  scrollToArea("#area_button_1", "#area_1") 

但这行不通。关于我做错了什么的任何想法？

Answer 1

您可能遇到范围界定问题。 $ -> 是一个函数调用，如:

$(function() { ...
});

和 CoffeeScript 自动 scopes your variables to their function所以你的 CoffeeScript 变成了这样的 JavaScript:

$(function() {
  var scrollToArea = function(button, area) { ... };
});

还有另一个自执行函数包装整个事情(除非你 compile with -b )以防止范围蔓延。

你甚至不需要这里的 $ -> ，该代码只是定义了一个函数，所以它可以随时运行，你不需要等到 DOM 准备好。如果您想在其他地方使用它，您还需要将 scrollToArea 函数推送到全局命名空间中。结果看起来像:

window.scrollToArea = (button, area) ->
  $(button).click ->
    scrollTo(area, 800)

或:

# `this` is `window` in this context so `@x` is the same as `window.x`
@scrollToArea = (button, area) ->
  $(button).click ->
    scrollTo(area, 800)

您可能还需要一个 $() 包装器，您也可以在其中使用 scollToArea，您可能不想调用 scrollToArea直到 DOM 准备就绪:

:javascript
  $(function() { scrollToArea("#area_button_1", "#area_1") )

我不是 HAML 专家，所以希望我没有破坏语法。