Где разместить Javascript, используемый только на одной странице в Rails 7 с помощью importmap

Question

При использовании Rails 7 с картами импорта, куда мне поместить код, который должен выполняться только одним представлением?

В частности, у меня есть представление, которое требует запуска кода Javascript при загрузке. Мой Javascript выглядит примерно так:

      import {TheController} from "./TheController"

let controller = new TheController();

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    controller.onLoad();
  }
};  

Как настроить среду Javascript, чтобы document.onreadystatechangeкод выполняется только нужным видом? (Все почти работает, когда я помещаю этот код в файл, импортированный application.js, но затем он выполняется каждым представлением.)

Я подозреваю, что ответ заключается в создании отдельных файлов importmap и importmap_tags; но я могу найти любые демонстрации того, как это сделать в Rails 7.

Answer 1

Как указывает @Azrklm, ответ содержится в этом видео https://youtu.be/PtxZvFnL2i0?t=1287 , начиная с 21:38.

Предположим, у нас есть некоторый JavaScript, который мы хотим запустить только в представлении с именем . Вот шаги

1. Разместите уникальный код FancyViewв своем собственном файле, скажем (и удалите его из application.js, если необходимо).

2. Добавьте строку для FancyView.jsна карту импорта: pin "FancyView"

3. Добавьте строку <%= yield :head %> to application.html.erb`. (Это сообщает Rails, что отдельные представления/макеты могут захотеть добавить дополнительную информацию в заголовок веб-страницы.)

           <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
   <%= javascript_importmap_tags %> <%# This loads application.js %>
   <%= yield :head %>
   

4. Добавить javascript_import_module_tagна вид:

           <% content_for :head do %>
     <%= javascript_import_module_tag "FancyView" %>
   <% end %>
   

Answer 2

Если у кого-то есть аналогичная проблема, найдет этот вопрос, я нашел ответ от @Zack совершенно кратким и именно тем, что мне нужно, НО с двумя важными оговорками:

1. Я не мог использовать соглашение об именах capcase для своих js. FancyViewнужно быть fancyView.

2. javascript_import_module_tag должен идти после ваших javascript_importmap_tags

           <%= javascript_importmap_tags %>
   <%= yield(:head) %>
   

Это также теперь объясняется на странице github rails: https://github.com/rails/importmap-rails#selectively-importing-modules

Спасибо @Зак!

Answer 3

DHH объясняет это довольно хорошо, посмотрите, пожалуйста, https://youtu.be/PtxZvFnL2i0?t=1287