ruby Rails 7:刺激不工作,控制台中没有错误

dgiusagp  于 2023-08-04  发布在  Ruby
关注(0)|答案(1)|浏览(124)

我按照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,浏览器控制台中没有任何内容,没有错误或警告。
任何帮助都会很好,谢谢。

v2g6jxz6

v2g6jxz61#

从webpacker升级并没有那么糟糕,所以你最好花时间转移到其他东西上,而不是解决所有这些问题。
但如果你想比较你的设置,这里我已经想通了:

# 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

x

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

这个管用

相关问题