如何在Rails中使用Stimulus - 怎么在Rails中使用Stimulus？

Rails Stimulus

Stimulus是一个有着适度野心的JavaScript框架。与其他前端框架不同，Stimulus旨在通过使用简单的注释将JavaScript对象连接到页面上的元素来增强静态或服务器渲染的HTML（即“您已经拥有的HTML”）。

使用Stimulus一段时间后，你会发现它与Rails非常契合。例如，你熟悉的Controller和Action，几乎不需要额外的学习成本。即使你对Rails有深入的理解，编写第一个Stimulus也不难。我的理解是，Stimulus会持续监控带有data-controller属性的标签，并在该标签范围内处理data-action事件并映射target元素。

以下是使用Stimulus实现点击一个<p>标签后复制内容的步骤演示

1, 用importmap安装stimulus。

rails stimulus:install:importmap

输出如下：

Create controllers directory
create  app/javascript/controllers
create  app/javascript/controllers/index.js
create  app/javascript/controllers/application.js
create  app/javascript/controllers/hello_controller.js
Import Stimulus controllers
append  app/javascript/application.js
Pin Stimulus
Appending: pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true"
append  config/importmap.rb
Appending: pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
append  config/importmap.rb
Pin all controllers
Appending: pin_all_from "app/javascript/controllers", under: "controllers"
append  config

2, 在页面上，当我点击区块链地址时，系统可以复制这个地址并弹出提示。假设控制器叫clipboard，那么在<div>添加data-controller="clipboard"，在<p>添加data-action="click->clipboard#copy_method"和data-clipboard-target="address"。

<div class="card-body" data-controller="clipboard">
  <h5 class="card-title">Ethereum</h5>
  <p class="card-text cursor-copy" data-action="click->clipboard#copy_method" data-clipboard-target="address">0x58ECd7e9cc814491Ea46925Bd53bc04916112089</p>
</div>

3, 在javascript/controllers/文件夹创建一个控制器：clipboard_controller.js。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["address"]
  copy_method(){
    try{
      const textArea = document.createElement('textarea')
      textArea.value = this.addressTarget.innerText
      this.addressTarget.appendChild(textArea)

      textArea.select()
      document.execCommand("copy")
      this.addressTarget.removeChild(textArea)

      alert("Success！")
    } catch(error) {
      console.log("Error！", error)
    }
  }
}

如果是<button>标签，那么data-action="click->clipboard#copy_method"可以简写成data-action="clipboard#copy_method"。以下列出其他元素的默认事件：

a click
button click
details toggle
form submit
input input
input type=submit click
select change
textarea input

请查阅官方文档以获取更多关于Stimulus的细节，点击这里可以了解更多DOM事件方法。

QmYnJmNLLGcNizrgv9Vtt28uQ4TKHs3ha7RbtaRWLTPgix