本教程旨在指导用户在Rails 7应用中，利用Importmap集成现代日期时间选择器，并解决因传统jQuery依赖导致的$未定义错误。通过采用原生JavaScript驱动的Tempus Dominus v6库，我们将详细配置Importmap、引入CSS、并以模块化方式初始化组件，从而实现高效且兼容的日期时间选择功能。
在Rails 7中，默认的JavaScript管理方案是Importmap，它推崇使用ES模块（ESM）规范，并鼓励减少对全局变量和传统jQuery的依赖。当尝试集成一些仍依赖于全局$（jQuery）符号的旧版JavaScript库时，开发者经常会遇到Uncaught ReferenceError: $ is not defined错误。本文将以集成日期时间选择器为例，展示如何通过迁移到现代库并采用原生JavaScript初始化方式来优雅地解决这一问题。
理解问题根源：$未定义错误
传统的JavaScript开发中，许多库（包括早期版本的日期时间选择器，如tempusdominus-bootstrap-4）都假定jQuery已在全局作用域中可用，并通过$符号进行访问。然而，在Rails 7的Importmap环境中，即使你通过pin “jquery”, to: “…”引入了jQuery，它通常也只会作为ES模块被加载，而不会自动将其$符号暴露给全局作用域。这意味着，任何直接尝试使用$(function() { … })或$(‘#selector’).plugin()的代码都将失败，因为在模块外部，$并未定义。
解决此问题的最佳实践是：
优先选择原生JavaScript库： 寻找那些不依赖于jQuery或提供原生JS接口的现代库。采用ES模块化导入和初始化： 遵循Importmap的模块化加载机制，避免全局变量。
基于此，我们将采用@eonasdan/tempus-dominus（通常称为Tempus Dominus v6）作为日期时间选择器，因为它是一个现代、原生JavaScript驱动的库，与Importmap环境完美兼容。
集成Tempus Dominus v6日期时间选择器
以下是逐步将Tempus Dominus v6集成到Rails 7应用的详细过程。
步骤一：配置Importmap
首先，我们需要在config/importmap.rb文件中定义Tempus Dominus及其相关依赖的映射。这些映射将告诉Rails如何加载这些库。
# config/importmap.rb# 核心应用和StimulusJSpin "application", preload: truepin "@hotwired/turbo-rails", to: "turbo.min.js", preload: truepin "@hotwired/stimulus", to: "stimulus.min.js", preload: truepin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: truepin_all_from "app/javascript/controllers", under: "controllers"# Tempus Dominus v6 及其依赖# Font Awesome (图标库，Tempus Dominus v6 推荐使用)pin "@fortawesome/fontawesome-free", to: "https://ga.jspm.io/npm:@fortawesome/fontawesome-free@6.5.1/js/all.js"# Popper.js (Bootstrap 5+ 的依赖，用于浮层定位，虽然不是直接用于日期选择器，但建议引入以确保兼容性)pin "@popperjs/core", to: "https://unpkg.com/@popperjs/core@2.11.8/dist/esm/index.js"# Tempus Dominus v6 核心库pin "tempus-dominus", to: "https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js"
@fortawesome/fontawesome-free: Tempus Dominus v6在显示日期/时间选择器的图标时，通常依赖于Font Awesome。@popperjs/core: 这是现代Bootstrap（v5及以上）的依赖，用于处理弹出窗口、工具提示等元素的定位。虽然Tempus Dominus本身可能不直接强制要求它，但作为现代前端环境的一部分，引入它有助于确保组件的正确行为和兼容性。tempus-dominus: 这是@eonasdan发布的Tempus Dominus库的最新版本，它提供了纯JavaScript实现，不依赖于jQuery。
步骤二：引入CSS样式表
Tempus Dominus v6需要其配套的CSS样式表才能正确渲染。我们应将其直接链接到HTML布局文件中。
Meetings
请注意，这里保留了原始问题中的Bootstrap 4 CSS链接。Tempus Dominus v6本身设计上更倾向于与Bootstrap 5+配合，但其核心功能在Bootstrap 4环境下也能工作，只是可能需要根据实际情况调整一些样式。
步骤三：JavaScript 初始化
现在，我们需要编写JavaScript代码来初始化日期时间选择器。为了保持代码的模块化和清晰，我们建议创建一个单独的自定义JavaScript文件。
首先，在app/javascript/application.js中引入这个自定义文件：
// app/javascript/application.jsimport "@hotwired/turbo-rails"import "controllers"// import "jquery" // 不再需要或不应直接在此处全局导入// import "tempusdominus-bootstrap-4" // 替换为新的Tempus Dominus v6// 引入自定义的Tempus Dominus初始化逻辑import "custom/init_tempus"
然后，创建app/javascript/custom/init_tempus.js文件并添加初始化逻辑：
// app/javascript/custom/init_tempus.jsimport { TempusDomin
以上就是Rails 7 Importmap下集成现代日期时间选择器：解决’$’未定义问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1575366.html
微信扫一扫 
支付宝扫一扫 
