如何從 Rails 6 視圖調用 JavaScript function

Question

在我看來，我正在嘗試調用我放在 application.js 中的 JavaScript function：

/* 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>標記中的主題中使用它？

Answer 1

“ Rails 5/6：如何在 webpacker 中包含 JS 函數？ ” 工作：

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

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

誰能解釋為什么在 Rails 6 中？

Answer 2

目前尚不清楚為什么function openNav()在 Rails 6 中不起作用。我懷疑它與從 Sprockets 到 Webpacker 的變化有關。 我確實找到了一個可能比將方法添加到“窗口”object 更傳統的解決方案。 將方法或屬性直接添加到“窗口”object 可能會無意中覆蓋默認值。 我接受了 RailsGuides 的指導。

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

我在 Open 和 Close 元素中添加了一個“id”，並刪除了它們的“onclick”屬性。 添加 id 允許我在 side_nav.js 文件中定位它們以添加“點擊”事件偵聽器。

索引.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";
  });
});