在所有视图中调用 CoffeeScript 函数（Ruby on Rails）

Question

这是我的第一个 * 问题，所以我希望我问对了！

我有一个 Ruby on Rails Web 应用程序，在我们的 javascript 文件中，我有以下 CoffeeScript 代码，它检测何时按下 id="submit" 的按钮，然后滚动到出现的第一个错误（如果有）（我们的表单中使用了“提交”按钮）：

@scroll_to_error = ->
  document.getElementById('submit').onclick = ->
  	if $('.alert-danger:visible:first').length > 0
      $('html, body').animate { scrollTop: $('.alert-danger:visible:first').offset().top - 220 }, '1000'
  	return

我在 config 文件夹中的 application.rb 文件中包含该文件，因此可以在视图部分的任何 HTML 文件中调用它~~但是，我想知道是否有办法让它可以召集了我所有的观点。有没有特定的方法可以做到这一点？

希望这是足够的信息 - 抱歉，我无法提供更多代码 sn-ps，因为我正在为一家公司编码（因此是“我们的”）。

Answer 1

一种方法是在函数中公开您的代码，以便您可以从视图中调用它。

咖啡脚本文件：

window.SomeNamespace ||= {}
window.SomeNamespace.scroll_to_error = ->
  document.getElementById('submit').onclick = ->
    if $('.alert-danger:visible:first').length > 0
      $('html, body').animate { scrollTop: $('.alert-danger:visible:first').offset().top - 220 }, '1000'

查看文件：（假设您正在使用 erb）

<script>
  $(function(){ 
    window.SomeNamespace.scroll_to_error()
  });
</script>

不过，更好的方法是将视图代码和 JavaScript 代码分开。 elementaljs 为 Rails 提供了一个小型 Javascript 行为库，我非常喜欢它。您可以通过 data 属性将 javascript 行为“附加”到特定的 html 元素，该库会为您完成上述工作。

Answer 2

试试这样的？

scrollToError = ->
  $('*[data-scroll-to-error="true"]').click ->
    alertElement = $('.alert-danger:visible:first')

    if alertElement.length > 0
      $('html, body').animate { 
        scrollTop: alertElement.offset().top - 220 
      }, '1000'

# Run with turbolinks.
$(document).on 'page:change', scrollToError

还有一个带有data-scroll-to-error 属性集的提交按钮。

<input type="submit" data-scroll-to-error="true" />

我觉得你的这种说法令人困惑：

我在配置中的 application.rb 文件中包含该文件 文件夹，以便可以在视图部分的任何 HTML 文件中调用它

假设这是一个标准的 Rails 项目，您应该在 assets/javascripts/application.js（清单文件）中包含包含 Coffeescript 代码的文件，并且由于 application.js 是布局中需要的 JS 文件（不是吗？ :-/)，此代码将在您的所有视图上执行。我不明白config/application.rb 是如何参与其中的。

更新：添加更多信息。

如果您不确定如何使用 application.js 文件（清单文件），请花时间阅读 Rails 的官方文档（尤其是关于清单的部分）。

http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives

在您的情况下，您需要修改 application.js 以包括：

...
//= require error
...

基本上，您列出所有要加载的资产文件以及使用布局的所有页面（可能是application.html.erb），然后仅提及布局的清单文件。这样，Rails 可以连接和缩小以生成单个资产文件。默认的 application. 清单文件会自动预编译 - 因此您无需手动将新资产添加到预编译列表中。

我将选择器写为*[data-scroll-to-error="true"] 的原因是个人喜好——这样我的代码读起来更好。如果您确定 ID submit （并且将来会）仅应用于需要滚动到错误的元素，那么可以将第一个选择器更改为 $('#submit').click ->