Tengo una aplicación Rails 7 en funcionamiento que usa esbuild como el paquete JS y he importado bootstrap.
Estoy tratando de descubrir cómo acceder a cualquier funcionalidad de Bootstrap Javascript 'fuera' del archivo application.js principal, es decir, digamos que quería mostrar programáticamente un modal de Bootstrap en una página particular como esta:
var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {}); myModal.modal('show');sin embargo, esto no funciona porque no se conoce 'bootstrap':
Uncaught ReferenceError: bootstrap is not defined... aunque la página se vincula en application.js:
<%= javascript_include_tag "application", defer: true %>¿Alguna sugerencia sobre cómo acceder a 'bootstrap' en JS fuera de application.js?
Gracias !
Suponiendo que haya creado su aplicación Rails con:
rails new APP_NAME --css=bootstrap ...
Lo que crea su aplicación con ESBUILD y lo deja con un archivo app/javascripts/application.js con este aspecto:
// Entry point for the build script in your package.json import "@hotwired/turbo-rails" import "./controllers" import * as bootstrap from "bootstrap"Ahora necesita codificar en el modal para usar el arranque importado.
Agregue el código que tiene en su pregunta debajo de la línea de importación de bootstrap :
// Modals var myModal = new bootstrap.Modal(document.getElementById('helpModal'), {}); myModal.modal('show'); // Or to have it triggered using a button document.getElementById('helpModalButton').addEventListener('click', event => { myModal.show(); });Esto activará los controladores de eventos.
Se puede encontrar más en la página Bootstrap Docs para cada uno de los Componentes (lo mismo se aplica a Modals y Popovers)
https://getbootstrap.com/docs/5.1/components/modal/#passing-options