Как вызвать функцию JavaScript из представления Rails 6

Question

На мой взгляд, я пытаюсь вызвать функцию JavaScript, которую я поместил в приложение. js:

/* 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: Как включить JS функции с помощью webpacker? " сработало:

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. Я нашел решение, которое может быть более традиционным, чем добавление методов к объекту "окно". Добавление методов или свойств непосредственно к объекту «окно» может непреднамеренно перезаписать значения по умолчанию. Я воспользовался руководством RailsGuides.

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

Я добавил «id» к элементам Open и Close и удалил их свойства «onclick». Добавление идентификаторов позволило мне настроить таргетинг на них в файле 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 завершил рендеринг. Это обеспечит доступность идентификатора для таргетинга. Если вы не используете 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";
  });
});