如何从Rails 6视图中调用JavaScript函数？

Question

在我的视图中，我试图调用一个我放在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 在我的pack文件夹中，虽然它建立了JavaScript文件，但它在控制台中返回这个错误。

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

我怎么能让这个文件在我的 pack/application.js 文件，而不是把它放在主题的一个 <script> 标签？

Answer 1

"Rails 56：如何用webpacker包含JS函数？"工作了。

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

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

谁能解释一下为什么在Rails 6中会出现这种情况？

Answer 2

不清楚为什么在Rails 6中 function openNav() 在Rails 6中无法使用。我怀疑这与从 Sprockets 到 Webpacker 的变化有关。我确实找到了一个比在 "window "对象中添加方法更常规的解决方案。直接将方法或属性添加到 "窗口 "对象中可能会无意中覆盖默认值。我从RailsGuides中得到了指导。

https:/edgeguides.rubyonrails.orgworking_with_javascript_in_rails.html。

我为Open和Close元素添加了一个 "id"，并删除了它们的 "onclick "属性。添加id后，我就可以在side_nav.js文件中为它们添加 "click "事件监听器。

索引.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"。

javascriptpacks/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";
  });
});