Rails 7:Stimulus不起作用,在控制台中没有错误。

huangapple go评论67阅读模式
英文:

Rails 7: Stimulus not working, no errors in console

问题

我正在遵循 https://github.com/hotwired/stimulus-rails/ 上的指南,并执行以下操作:

在你的 Gemfile 中添加 stimulus-rails gem:gem 'stimulus-rails'
运行 ./bin/bundle install
运行 ./bin/rails stimulus:install

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

import { Application } from "@hotwired/stimulus";

const application = Application.start();

// 配置 Stimulus 开发体验
application.debug = true;
window.Stimulus = application;

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

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

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

import { Controller } from "@hotwired/stimulus";

// 连接到 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

// 这个文件是通过 ./bin/rails stimulus:manifest:update 自动生成的
// 每当你添加新的控制器或使用 ./bin/rails generate stimulus controllerName 创建它们时,请运行该命令

import { application } from "./application";

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

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

<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>

在添加文本并单击问候按钮后,没有任何反应,浏览器控制台中没有任何消息、错误或警告。

英文:

I am following the instructions on https://github.com/hotwired/stimulus-rails/ and executed

Add the stimulus-rails gem to your Gemfile: gem &#39;stimulus-rails&#39;
Run ./bin/bundle install.
Run ./bin/rails stimulus:install

below is the app/javascripts/controller/application.js

import { Application } from &quot;@hotwired/stimulus&quot;

const application = Application.start()

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

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

export { application }
console.log(&#39;helllo world&#39;);

below is the app/javascripts/controller/hello_controller.js

import { Controller } from &quot;@hotwired/stimulus&quot;

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

  connect() {
    console.log(&#39;connected&#39;);
  }

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

below is the 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 &quot;./application&quot;

import HelloController from &quot;./hello_controller&quot;
application.register(&quot;hello&quot;, HelloController)
console.log(&#39;hellow&#39;);

here is the relevant view code in one of the index pages

&lt;div data-controller=&quot;hello&quot;&gt;
  &lt;input data-hello-target=&quot;name&quot; type=&quot;text&quot;&gt;

  &lt;button data-action=&quot;click-&gt;hello#greet&quot;&gt;Greet&lt;/button&gt;

  &lt;span data-hello-target=&quot;output&quot;&gt;&lt;/span&gt;

&lt;/div&gt;

After adding text and clicking greet button nothing happens, nothing in the browser console, no errors or warnings.

any help here would be great, Thanks.

答案1

得分: 1

从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
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

这个工作。

英文:

Upgrading from webpacker wasn't that bad, so you might as well spend time on moving to something else than fixing all these issues.

But in case you want to compare your set up, here what I've figured out:

# 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(&#39;Hello World from Webpacker&#39;)

import &quot;../controllers&quot;
# app/views/layouts/application.html.erb

&lt;%= javascript_pack_tag &quot;application&quot; %&gt;

Note that packages were renamed with @hotwired prefix at some point:

// import { Controller } from &quot;stimulus&quot;           // nay
import { Controller } from &quot;@hotwired/stimulus&quot;    // yay

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

This works.

huangapple
  • 本文由 发表于 2023年7月13日 17:40:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76677979.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定