ruby-on-rails 如何让JS资产在Rails7上工作?

vsdwdz23  于 2023-03-13  发布在  Ruby
关注(0)|答案(1)|浏览(208)

我在我的Rails应用程序中使用JS时遇到了一些麻烦--我设法产生的唯一“解决方案”是 * 将脚本复制粘贴到我所有的布局中 *,这是一个痛苦。
现在我试着创建一个新的rails应用,然后在app/javascript/application.js中创建一个只显示警报的函数,试图在浏览器的开发者控制台中调用这个函数时,我得到了一个引用错误。

// Configure your import map in config/importmap.rb. Read more: https://github.>
import "@hotwired/turbo-rails"
import "controllers"

function fishy(msg) {alert(msg);}

app/views/layouts/application*开始:

<%= javascript_importmap_tags %>

这适用于开发和生产环境。
在我自己的项目中,我一直在使用Chartkick来显示图表--有一天突然停止工作了,但只是在远程服务器上,而不是在我的本地开发环境中。与测试应用不同,这个应用有一个app/assets/javascript文件夹--包含一个application.js文件:

//= require chartkick
//= require Chart.bundle

function fishy(msg) {alert(msg);}

(That测试功能也不起作用..)
我哪里做错了?

laik7k3q

laik7k3q1#

在新Rails应用程序的第一个示例中的application.js文件中,没有调用函数。
function fishy(msg) {alert(msg);}之后,只需添加fishy("hello")即可看到警报。
另外,我不认为您可以在<script></script>内的Ruby erb文件中调用此函数,因为默认情况下它不适用于全局范围。
如果你想让它可用,那么可能这样附加它:

window.fishy = function fishy(msg) {alert(msg);}

并在页面中这样称呼它:

<script>
  window.fishy("hello")
</script>

我也捆绑了esbuild服务器端,所以我不太确定你的importmaps设置有什么问题。(另外,Importmaps或Jsbundling/Esbuild实际上是关于从NPM导入外部JS库的)
虽然在你的每个页面中添加JS内联并不是Rails 7真正能做到的。你最好使用Hotwired的Turbo和Stimulus。我写了一个关于它的快速线程,也许它会有帮助:如何在带有Turbo、ImportMaps和Stimulus的Rails 7应用中加载页面特定的自定义Javascript函数?

相关问题