使用 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 依賴項可確保您的應用程式保持可維護性和最新狀態。

編碼愉快！