Cuando uso Rails 7 con mapas de importación, ¿dónde coloco el código que debe ejecutarse solo en una vista?
Específicamente, tengo una vista que necesita ejecutar algún código Javascript al cargar. Mi Javascript se parece a esto:
import {TheController} from "./TheController" let controller = new TheController(); document.onreadystatechange = function () { if (document.readyState === 'complete') { controller.onLoad(); } }; ¿Cómo configuro el entorno Javascript para que el código document.onreadystatechange sea ejecutado solo por la vista deseada? ( Casi todo funciona cuando coloco este código en un archivo importado por application.js , pero luego se ejecuta en todas las vistas).
Sospecho que la respuesta es crear importmaps e importmap_tags separados; pero puedo encontrar demostraciones de cómo hacerlo en Rails 7.
Como señala @Azrklm, la respuesta está contenida en este video https://youtu.be/PtxZvFnL2i0?t=1287 que comienza a las 21:38.
Supongamos que tenemos algo de JavaScript que queremos ejecutar solo en una vista llamada FancyView . Aquí están los pasos
Coloque el código exclusivo de FancyView en su propio archivo, digamos FancyView.js (y elimínelo de application.js , si es necesario).
Agregue una línea para FancyView.js al mapa de importación: pin "FancyView"
Agregue la línea <%= yield :head %> to application.html.erb`. (Esto le dice a Rails que las vistas/diseños individuales pueden querer agregar información adicional al encabezado de la página web).
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> <%# This loads application.js %> <%= yield :head %> Agregue una javascript_import_module_tag a la vista:
<% content_for :head do %> <%= javascript_import_module_tag "FancyView" %> <% end %>Si alguien tiene un problema similar y encuentra esta pregunta, encontré que la respuesta de @Zack es perfectamente concisa y exactamente lo que necesitaba, PERO con 2 advertencias importantes:
No pude usar la convención de nomenclatura mayúscula para mi js. FancyView necesitaba ser fancyView .
El javascript_import_module_tag debe venir después de sus javascript_importmap_tags
<%= javascript_importmap_tags %> <%= yield(:head) %>Esto también se explica ahora en la página de github de Rails: https://github.com/rails/importmap-rails#selectively-importing-modules
¡Gracias @Zack!
DHH lo explica bastante bien, echa un vistazo por favor https://youtu.be/PtxZvFnL2i0?t=1287