Javascript 跨所有视图调用CoffeeScript函数（Ruby on Rails）_Javascript_Jquery_Ruby On Rails_Ruby_Coffeescript

Javascript 跨所有视图调用CoffeeScript函数（Ruby on Rails）

javascript jquery ruby-on-rails ruby coffeescript

Javascript 跨所有视图调用CoffeeScript函数（Ruby on Rails）,javascript,jquery,ruby-on-rails,ruby,coffeescript,Javascript,Jquery,Ruby On Rails,Ruby,Coffeescript,这是我的第一个问题，所以我希望我问得对我有一个Ruby on Rails web应用程序，在我们的javascript文件中，我有以下CoffeeScript代码，它检测id为“submit”的按钮何时被按下，然后滚动到出现的第一个错误（如果有）（表单中使用了“submit”按钮）： @滚动至\u错误=-> document.getElementById（'submit'）。onclick=-> 如果$（'.alert danger:可见：first'）。长度>0 $（'html，body'

这是我的第一个问题，所以我希望我问得对

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

@滚动至\u错误=->
document.getElementById（'submit'）。onclick=->
如果$（'.alert danger:可见：first'）。长度>0
$（'html，body'）。为{scrollTop:$（'.alert danger:visible:first'）制作动画。偏移量（）.top-220}，'1000'
return

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

咖啡脚本文件：

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）


$（函数（）{
window.SomeNamespace.scroll\u至\u error（）
});

但是，更好的方法是分离视图代码和javascript代码。为Rails提供了一个小的Javascript行为库，我非常喜欢它。您可以通过

data

属性将javascript行为“附加”到特定的html元素，库为您完成上述工作。

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

咖啡脚本文件：

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）


$（函数（）{
window.SomeNamespace.scroll\u至\u error（）
});

但是，更好的方法是分离视图代码和javascript代码。为Rails提供了一个小的Javascript行为库，我非常喜欢它。您可以通过

data

属性将javascript行为“附加”到特定的html元素，库会为您执行上述操作。

尝试类似的操作吗

scrollToError=->
$（'*[数据滚动到error=“true”]'）。单击->
alertElement=$（'.警报危险：可见：第一个'）
如果alertElement.length>0
$（'html，body'）。设置动画{
scrollTop:alertElement.offset（）.top-220
}, '1000'
#与涡轮链接一起运行。
$（文档）。在“页面：更改”上，滚动至错误

和一个带有

数据滚动到error

属性集的提交按钮

我觉得你的这句话令人困惑：

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

假设这是一个标准的Rails项目，您应该在

assets/javascripts/application.js

（清单文件）中包含包含Coffeescript代码的文件，并且由于

application.js

是布局中所需的js文件（不是吗？：-/），因此此代码将在所有视图中执行。我看不出这里是如何涉及

config/application.rb

的

更新：添加更多信息

如果您不确定如何使用

application.js

文件（清单文件），请花时间阅读Rails的官方文档（特别是关于清单的部分）

在您的情况下，您需要修改

application.js

，以包括：

...
//= require error
...

基本上，您将列出所有要加载的资产文件以及使用布局的所有页面（可能是

application.html.erb

），然后仅提及布局中的清单文件。通过这种方式，Rails可以连接和缩小以生成单个资源文件。默认的

应用程序。

清单文件是自动预编译的-因此您不需要手动将新资产添加到预编译列表中

我之所以将选择器写为

*[data scroll to error=“true”]

是因为我个人偏好——这样代码对我来说读起来更好。如果您确定ID

submit

仅应用于（将来也将应用于）需要滚动出错的元素，那么可以将第一个选择器更改为

$（“#submit”）。单击->