select2 在带有支架的 rails 6 中不起作用

Posted 2023-05-07

【中文标题】select2 在带有支架的 rails 6 中不起作用

【英文标题】：select2 doesn't work in rails 6 with trestle

【发布时间】：2021-02-18 02:23:07

【问题描述】：

当我访问 http://localhost:3000/admin/sport_categories

forms.js 不会触发控制台日志

javascript/packs/forms.js

import $ from 'jquery'
import 'select2'
import 'select2/dist/css/select2.css'

console.log('line 5')
window.addEventListener('DOMContentLoaded', () => 
  $('.select2').select2()
)

$(document).on("turbolinks:load", () => 
  $('.select2').select2()
)

javascript/packs/application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("forms")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

package.json

  "name": "data_handler",
  "private": true,
  "dependencies": 
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.3.0",
    "jquery": "^3.5.1",
    "select2": "^4.0.13",
    "turbolinks": "^5.2.0"
  ,
  "version": "0.1.0",
  "devDependencies": 
    "webpack-dev-server": "^3.11.0"
  

宝石文件

source 'https://rubygems.org'
git_source(:github)  |repo| "https://github.com/#repo.git" 

ruby '2.7.0'

gem 'trestle', '~> 0.8.11'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '~> 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

【参考方案1】：

我没有注意到任何代码显示您将 js 添加到视图的位置。

<%= javascript_pack_tag 'forms' %>

我建议放在sport_categories.html.erb 或application.html.erb 的底部。

来源： https://github.com/rails/webpacker#usage

【讨论】：

application.js 文件有控制台日志并且这些控制台日志根本不触发是否正常？

成功了！谢谢。为什么 不这样做呢？

根据开发模式，它们可能不会触发。我不知道你的项目结构是什么，我猜它与那个或数据**重新加载位有关。

这也可能与您使用的管理员有关。有时，像这样的宝石特别适用于添加自定义资产。我会查看相关文档。