Rails 7 Importmap下集成现代日期时间选择器：解决'$'未定义问题-html教程-PHP中文网

Rails 7 Importmap下集成现代日期时间选择器：解决'$'未定义问题

聖光之護

发布： 2025-09-12 09:58:31

原创

180人浏览过

rails 7 importmap下集成现代日期时间选择器：解决'$'未定义问题

本教程旨在指导用户在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如何加载这些库。

猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

查看详情

# config/importmap.rb

# 核心应用和StimulusJS
pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_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布局文件中。

<!-- app/views/layouts/application.html.erb -->
<!DOCTYPE html>
<html>
  <head>
    <title>Meetings</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <!-- 你的其他CSS，例如Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

    <!-- Tempus Dominus v6 样式表 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css" crossorigin="anonymous"/>

    <%= javascript_importmap_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

登录后复制

请注意，这里保留了原始问题中的Bootstrap 4 CSS链接。Tempus Dominus v6本身设计上更倾向于与Bootstrap 5+配合，但其核心功能在Bootstrap 4环境下也能工作，只是可能需要根据实际情况调整一些样式。

步骤三：JavaScript 初始化

现在，我们需要编写JavaScript代码来初始化日期时间选择器。为了保持代码的模块化和清晰，我们建议创建一个单独的自定义JavaScript文件。

首先，在app/javascript/application.js中引入这个自定义文件：

// app/javascript/application.js
import "@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.js
import { TempusDomin

登录后复制

以上就是Rails 7 Importmap下集成现代日期时间选择器：解决'$'未定义问题的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

CSS ::selection 伪元素样式失效：理解浏览器兼容性与正确实践 CSS技巧：如何在隐藏PNG图像的同时保留其投影效果 CSS图像定位：实现水平居中与垂直下移的实用指南实现标签悬停显示网页内容预览的CSS方法解决CSS布局中图片间隙问题的实用指南