如何从 Rails 6 视图调用 JavaScript 函数答案

【问题标题】：How to call a JavaScript function from Rails 6 view如何从 Rails 6 视图调用 JavaScript 函数
【发布时间】：2020-08-20 22:28:46
【问题描述】：

在我看来，我正在尝试调用我放在 application.js 中的 JavaScript 函数：

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

这是我的 HTML：

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

如果我把它放在<script></script> 标签中，那么它就可以工作。我的application.js 有效并且正在编译，但由于某种原因，它仅在 JavaScript 位于 html.erb 文件的实际视图中时才有效。但是如果它在我的包文件夹中的application.js 中，虽然它会构建 JavaScript 文件，但它会在控制台中返回此错误：

(index):23 Uncaught ReferenceError: openNav is not defined
    at HTMLSpanElement.onclick ((index):23)

我怎样才能让它在我的pack/application.js 文件中工作，而不是让它在主题中的<script> 标签中工作？

【问题讨论】：

请不要编辑您的问题来告诉我们您找到了解决方案。问题是专门针对问题的，就像答案只针对答案一样。 SO 不是消息列表或论坛，它就像一本在线教科书，您刚刚在其中创建了一篇新文章。它比其他两种类型的网站更正式。 tour 和“How to Ask”及其链接页面对此进行了讨论。

标签： javascript ruby-on-rails ruby

【解决方案1】：

“Rails 5/6: How to include JS functions with webpacker?”工作：

window.closeNav = function() {
  document.getElementById("mySidenav").style.width = "0";
}

window.openNav = function() {
  document.getElementById("mySidenav").style.width = "250px";
}

谁能解释为什么在 Rails 6 中？

【讨论】：

【解决方案2】：

目前尚不清楚为什么function openNav() 在 Rails 6 中不起作用。我怀疑这与从 Sprockets 到 Webpacker 的更改有关。我确实找到了一个可能比将方法添加到“窗口”对象更传统的解决方案。将方法或属性直接添加到“窗口”对象可能会无意中覆盖默认值。我接受了 RailsGuides 的指导。

https://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html

我在 Open 和 Close 元素中添加了一个“id”，并删除了它们的“onclick”属性。添加 id 允许我在 side_nav.js 文件中定位它们以添加“点击”事件侦听器。

Index.html.erb

<div id="mySidenav" class="sidenav">
  <a href="#" class="closebtn" id="close-nav >&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span id="open-nav>Open</span>

<%= javascript_pack_tag 'side_nav' %>

我正在使用 Turbolinks，所以我等到 Turbolinks 加载后才添加事件侦听器，以确保 DOM 完成渲染。这将确保“id”可用于定位。如果您不使用 Turbolinks，您可以将其更改为“DOMContentLoaded”。

javascript\packs\side_nav.js

window.addEventListener("turbolinks:load", () => {
  // Open
  document.getElementById('open-nav').addEventListener("click", e => {
    e.preventDefault();
    document.getElementById("mySidenav").style.width = "250px";
  });

  // Close
  document.getElementById('close-nav').addEventListener("click", e => {
    e.preventDefault();
    document.getElementById("mySidenav").style.width = "0";
  });
});

【讨论】：