使用 Stimulusjs 和 JavaScript 集成增强您的 Rails pp

admin数码25/07/2024 12:22:3700

使用 Stimulusjs 和 JavaScript 集成增强您的 Rails pp-第1张图片-海印网

使用 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 控制器：

<p data-controller="hello">
  <h1 data-hello-target="output"></h1>
  <button data-action="click-&gt;hello#greet">greet</button>
</p>

登录后复制

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

立即学习“Java免费学习笔记（深入）”；

与其他 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!')
  }
}

登录后复制