我正在按照https://github.com/hotwired/stimulus-rails/上的指令执行

Add the stimulus-rails gem to your Gemfile: gem 'stimulus-rails'
Run ./bin/bundle install.
Run ./bin/rails stimulus:install

下面是app/javascripts/controller/application.js

import { Application } from "@hotwired/stimulus"

const application = Application.start()

// Configure Stimulus development experience
application.debug = true
window.Stimulus   = application

Stimulus.handleError = (error, message, detail) => {
  console.warn(message, detail)
  ErrorTrackingSystem.captureException(error)
}

export { application }
console.log('helllo world');

下面是app/javascripts/controller/hello_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects with data-controller="hello"
export default class extends Controller {
  static targets = [ "name", "output" ]

  connect() {
    console.log('connected');
  }

  greet() {
    console.log('hello world!!');
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}

下面是app/javascripts/controller/index.js

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

import { application } from "./application"

import HelloController from "./hello_controller"
application.register("hello", HelloController)
console.log('hellow');

以下是其中一个索引页中的相关视图代码

<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">Greet</button>

  <span data-hello-target="output"></span>

</div>

添加文本并单击问候键后,没有任何react 、浏览器控制台中没有任何内容、没有错误或警告.

如果能帮上忙就太好了,谢谢.

推荐答案

从WebPacker升级并不是那么糟糕,所以你不如把时间花在转移到其他东西上,而不是修复所有这些问题.

但如果你想比较一下你的设置,下面是我的 idea :

# Rails 7.0.6
nvm use 16
rails new install_nojs -J
cd install_nojs
bundle add webpacker stimulus-rails
rails webpacker:install
rails stimulus:install
rails g controller Home index
yarn add @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object --dev
bin/webpack-dev-server
bin/rails s
// app/javascript/packs/application.js

console.log('Hello World from Webpacker')

import "../controllers"
# app/views/layouts/application.html.erb

<%= javascript_pack_tag "application" %>

请注意,在某个时刻,程序包被重命名为带有@hotwired前缀:

// import { Controller } from "stimulus"           // nay
import { Controller } from "@hotwired/stimulus"    // yay

export default class extends Controller {
  static targets = [ "name", "output" ]
  greet() {
    this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
  }
}
<!-- app/views/home/index.html.erb -->
<div data-controller="hello">
  <input data-hello-target="name" type="text">
  <button data-action="click->hello#greet">Greet</button>
  <span data-hello-target="output"></span>
</div>
open http://localhost:3000/home/index

这很管用.

Javascript相关问答推荐

在类型脚本中使用浏览器特定属性的正确方法是什么?

判断现代浏览器中的点击是否由touch 触发

无法在page. evalve()内部使用外部函数

如何在react + react路由域名中使用DeliverBrowserRouter?

如何避免使用ajax在Vue 3合成API中重定向

使用useParams路由失败

不渲染具有HTML参数的React元素

如何访问react路由v6加载器函数中的查询参数/搜索参数

Phaser框架-将子对象附加到Actor

Redux工具包查询(RTKQ)端点无效并重新验证多次触发

Cookie中未保存会话数据

未捕获错误:[]:getActivePinia()被调用,但没有活动Pinia.🍍""在调用app.use(pinia)之前,您是否try 使用store ?""

屏幕右侧屏障上的产卵点""

无法从NextJS组件传递函数作为参数'

映射类型定义,其中值对应于键

AddEventListner,按键事件不工作

更新Redux存储中的对象数组

在不扭曲纹理的情况下在顶点着色器中旋转UV

react -原生向量-图标笔划宽度

FireBase FiRestore安全规则-嵌套对象的MapDiff