如何在Rails應(yīng)用中使用StimulusJS

發(fā)布時間：2024-06-06 13:02:04 來源：億速云閱讀：87 作者：小樊欄目：web開發(fā)

在Rails應(yīng)用中使用StimulusJS，首先需要在Gemfile文件中添加stimulus-rails gem：

gem 'stimulus-rails'

然后運行bundle install安裝gem。接下來，需要在app/javascript/packs/application.js文件中引入StimulusJS：

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("../controllers", true, /\.js$/)
application.load(definitionsFromContext(context))

在app/javascript/controllers目錄下，創(chuàng)建控制器文件，例如hello_controller.js：

import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    console.log("Hello, Stimulus!")
  }
}

在需要使用StimulusJS的視圖中，可以使用data-controller和data-action屬性來指定控制器和操作：

<div data-controller="hello">
  <button data-action="click->hello#connect">Click me</button>
</div>

最后，在應(yīng)用的視圖中引入pack_tag標簽來加載JavaScript文件：

<%= javascript_pack_tag 'application' %>

這樣就可以在Rails應(yīng)用中使用StimulusJS了。通過定義控制器和操作，可以實現(xiàn)頁面上的交互功能。

向AI問一下細節(jié)

如何在Rails應(yīng)用中使用StimulusJS

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽