使用 Stimulus.js 和 JavaScript 集成增强您的 Rails 7 应用程序

Stimulus.js 是一个简单的 JavaScript 框架，可以增强您的 HTML。它是 Rails 内置功能的完美伴侣。在这篇文章中，我们将探讨如何使用 Stimulus.js 实现 JavaScript 功能，将其与其他 JavaScript 库集成，以及使用 Importmap 有效管理 JavaScript 依赖项。

先决条件

在我们开始之前，请确保您具备以下条件：

• Rails 7 应用程序设置
• JavaScript和Rails基础知识

在 Rails 7 中设置 Stimulus.js

Rails 7 默认支持 Stimulus.js。首先，通过运行以下命令确保 Stimulus 包含在您的应用程序中：

rails new my_app
cd my_app

您可以在 app/javascript/controllers 中找到 Stimulus 控制器。

创建刺激控制器

让我们创建一个 Stimulus 控制器来处理简单的点击事件。运行以下命令：

rails generate stimulus hello

这将在 app/javascript/controllers 中生成一个新的控制器 hello_controller.js。打开文件并添加以下代码：

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

在 HTML 中，使用 Stimulus 控制器：

  

  Greet

单击按钮时，文本将更改为“Hello, World!”。

与其他 JavaScript 库集成

Stimulus.js 可以与其他 JavaScript 库无缝协作。例如，让我们将 jQuery 与 Stimulus.js 集成。

首先，使用Importmap添加jQuery：

将 jQuery 添加到您的 config/importmap.rb:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

然后，在您的 Stimulus 控制器中导入 jQuery：

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

管理 JavaScript 依赖关系

使用 Importmap 管理 Rails 7 中的 JavaScript 依赖关系非常简单。这里有一些提示：

• 添加库： 在 config/importmap.rb 中使用 pin "library_name", to: "library_url" 添加新库。
• 删除库： 从 config/importmap.rb 中删除相应行以删除现有库。
• 更新库：将config/importmap.rb中的URL更新为最新版本。
• 检查过时的库：访问 config/importmap.rb 中的 URL 以查看是否有新版本可用。

您还可以将自定义 JavaScript 文件添加到您的项目中。将它们放在 app/javascript 文件夹中并在需要的地方导入它们。

结论

Stimulus.js 提供了一种强大而简单的方法来将 JavaScript 功能添加到 Rails 应用程序中。通过将其与其他 JavaScript 库集成，您可以创建丰富且动态的用户体验。正确管理您的 JavaScript 依赖项可确保您的应用程序保持可维护性和最新状态。

编码愉快！