Soy novato en los módulos JS e Import Map, ahora estoy usando Ruby on Rails 7 y no pude encontrar una manera de hacer que esto funcione:
Módulo Js (propuestas.js):
function openProposalMirror() ...aplicación.js
import * as Proposal from "./proposals.js"En la vista:
onclick="Proposal.openProposalMirror()"error: Referencia no detectadaError: la propuesta no está definida
¿Cómo podría acceder a la función openProposalMirror() en la vista?
Una forma de hacerlo es asignar la Proposal a la ventana del objeto. window.Proposal .
puede configurar directamente dentro de application.js como se muestra a continuación:
// proposals.js function openProposalMirror() {} export { openProposalMirror } // application.js import * as Proposal from "./proposals.js" window.Proposal = Proposal // view onclick="Proposal.openProposalMirror()" también puede volver a exportar la Proposal desde application.js luego importarla y asignarla a la ventana del objeto window.Proposal en una etiqueta <script> (a la vista) como se muestra a continuación:
// application.js import * as Proposal from "./proposals.js" export { Proposal }; // view <%= javascript_importmap_tags %> <script type="module"> import { Proposal } from "application" window.Proposal = Proposal; </script>En mi ejemplo, estoy tratando de usar Ag-Grid. Después de fijar la fuente:
bin/importmap pin ag-grid-communityTodo lo que tenía que hacer era importar en mi archivo .html.erb:
<script type="module"> import { Grid } from "ag-grid-community" var gridOptions = { columnDefs: [ { headerName: 'Make', field: 'make' }, { headerName: 'Model', field: 'model' }, { headerName: 'Price', field: 'price' } ], rowData: [ { make: 'Toyota', model: 'Celica', price: 35000 }, { make: 'Ford', model: 'Mondeo', price: 32000 }, { make: 'Porsche', model: 'Boxster', price: 72000 } ] } document.addEventListener('DOMContentLoaded', () => { const gridDiv = document.querySelector('#myGrid') new Grid(gridDiv, gridOptions) }) </script> Entonces, no el habitual <%= javascript do %> , sino <script type="module"> . Una vez incluido en el mapa de importación, no es necesario agregar nada a application.js.