如何在 rails 视图中调用 javascript 函数?

Question

我刚刚从RAILS 5升级到RAILS6，我看到所有rails视图都无法像以前在RAILS 5中那样调用javascript函数。

我有一个外部 JavaScript 文件位于

app/javascript/packs/station.js

这被嵌入在应用程序/视图/布局/应用程序.html.erb 中作为

<%= javascript_pack_tag 'station' %>

这是我如何从html.erb文件调用javascrpt函数的代码：

<%= text_field_tag(:station_text_field, ... ,
onkeyup: "javascript: request_stations(); ") %>

当我尝试调用作为工作站一部分的函数时.js然后在浏览器开发器视图中出现错误：引用错误：未定义request_stations

但我也可以在调试器下的 brwoser 视图中看到：

Webpack / app/javascript / packs / station.js 
and the javascript function I want to call.

所以这个脚本似乎是由浏览器加载的。

相比之下，当我只是将代表此 javascript 函数的这几行直接复制并粘贴到模板视图文件中时(...html.erb(，类似于：

<script>
function request_stations ()
{
alert("calling request_stations");
};
</script>

然后 - 它按预期工作！

Answer 1

默认情况下，Webpacker 打包的 JavaScript 文件中定义的变量/函数将在全球范围内不可用。

这是一件好事，因为它可以防止全局命名冲突。一般来说，你不想从你的视图中引用javascript函数/变量。相反，您希望以使用其id或其他属性将功能附加到 DOM 节点的方式编写 JavaScript。

下面是基于您提供的代码的基本示例：

# in your rails view
<%= text_field_tag(:station_text_field, ..., id: 'station-text-field') %>

// in your javascript
function request_stations() {
alert("calling request_stations");
};
const stationTextField = document.querySelector("#station-text-field");
stationTextField.addEventListener('keyup', (event) => {
request_stations();
});

Answer 2

同意mhunter的回答。 这篇文章帮助我了解了 Rails 6 中的这种差异：https://blog.capsens.eu/how-to-write-javascript-in-rails-6-webpacker-yarn-and-sprockets-cdf990387463

我在你的问题中没有看到的是你是否在app/javascript/packs/application.js中这样做了：

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("station")

Rails 6 的最大区别在于你必须刻意：

• 1. 需要一个 JS 文件
• 2. >故意从该文件导出某些内容
• 3. 故意在你想要使用它的文件中导入该内容。

因此，如果您想使用station.js中的函数，请连接上述步骤。从station.js中的简单函数开始，该函数在 DOMContentLoad 上触发，并添加一个控制台.log("嘿，工作站.js还活着而且很好"(。如果您没有看到它，那么这 3 个步骤中的某些内容是不对的。

在 Rails6 之前，你有一个 JavaScript 的"花园"，只是因为处于资产管道中。在 Rails 6 中，你必须更加慎重。