Rails学习-使用turbo-rails时的一些问题
Rails7开始默认使用importmap作为javascript依赖的管理工具(类似于npm)
遇到的问题
- 生成的项目工程目录下的bin目录中没有importmap命令
- turbo-rails貌似没有被引入项目中(直接创建项目工程后没有进行相关配置)
安装turbo-rails
- 安装importmap
# step1. 安装importmap
bin/rails·importmap:install
上述命令,主要会生成bin/importmap、config/importmap.rb、app/javascript/application.js文件
- 通过importmap引入turbo
# step2. 使用importmap管理turbo依赖
bin/importmap·pin·@hotwired/turbo
执行上述命令后,Rails会自动往config/importmap.rb文件中加入依赖名称,并在app/javascript/application.js文件中导入turbo-rails
# Pin npm packages by running ./bin/importmap
pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
- 安装turbo
# step3
bin/rails·turbo:install
使用turbo-rails
使用
turbo_confirm代替原先的confirm,例如: <%= button_to "Empty cart", cart, method: :delete, form: { data: { turbo_confirm: "Are you sure?" } } %>
生成的HTML代码如下
<form data-turbo-confirm="Are you sure?" class="button_to" method="post" action="/carts/20">
<input type="hidden" name="_method" value="delete" autocomplete="off">
<button type="submit">Empty cart</button>
<input type="hidden" name="authenticity_token" value="cxmrMyiULbRE9a3PrKRdSaFz90lhI7BnuQ45asjQjITJMsx-5186VueizTPDYklStOYWCtwSy_tRuc9mttDKOQ" autocomplete="off">
</form>
效果

关于Rails7+版本中使用importmap,可以参考Import Maps Under the Hood in Rails 7这篇文章