刺激JS控制器未连接到Rails应用程序
我正在使用Ruby 3.0.2的Rails 7.0.2应用程序，并且正在关注刺激教程，以制作剪贴板复制按钮 https://stimulus.hotwired.dev/handbook/hello-stimulus 。连接但没有记录。我还在浏览器开发工具中收到一些奇怪的消息：
Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”. data:28:7
Uncaught Error: Unable to resolve specifier '@rails/request.js' imported from http://localhost:3000/assets/application-234f8bed8636066fccb3be9d9c37552702ed61ecdcfeb919a52fa12d5a694d68.js
我的控制器：
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="copy"
export default class extends Controller {
static targets = ["source"]
connect() {
console.log("connect");
alert("connect")
}
copy(){
navigator.clipboard.writeText(this.sourceTarget.value)
}
}
html：
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" data-controller="copy">
<dt class="text-sm font-medium text-gray-500">Request URL</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" data-copy-target="source"><%= @url %></dd>
<button data-action="copy#copy">Copy!</button>
</div>
如何将刺激控制器连接到我的应用程序？
I'm working on a Rails 7.0.2 App with Ruby 3.0.2 and I'm following the stimulus tutorial for making a clipboard copy button https://stimulus.hotwired.dev/handbook/hello-stimulus .When I press the button nothings happened and I've over ridden my controllers connect method to log to the console upon connection but nothing gets logged. I'm also getting some weird messages in the browser dev tools:
Uncaught TypeError: Error resolving module specifier “application”. Relative module specifiers must start with “./”, “../” or “/”. data:28:7
Uncaught Error: Unable to resolve specifier '@rails/request.js' imported from http://localhost:3000/assets/application-234f8bed8636066fccb3be9d9c37552702ed61ecdcfeb919a52fa12d5a694d68.js
My controller:
import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="copy"
export default class extends Controller {
static targets = ["source"]
connect() {
console.log("connect");
alert("connect")
}
copy(){
navigator.clipboard.writeText(this.sourceTarget.value)
}
}
HTML:
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6" data-controller="copy">
<dt class="text-sm font-medium text-gray-500">Request URL</dt>
<dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2" data-copy-target="source"><%= @url %></dd>
<button data-action="copy#copy">Copy!</button>
</div>
How do I connect my Stimulus controllers to my app?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您是否尝试添加指示器“单击”
have you tried to add the indicator "click"
看来您在页面上有一些无关的JavaScript错误。那将阻止您的控制器射击。
另外，请确保将刺激控制器添加到清单中。确保编译的资产具有控制器。您可能需要进行资产：Clobber资产：预编译。
It looks like you have some unrelated javascript errors on the page. That will stop your controller from firing.
Also, ensure that the stimulus controller was added to the manifest. Make sure the compiled assets have the controller. You may need to do assets:clobber assets:precompile.