简单的问题，从刺激控制器内部访问 URL 助手的正确方法是什么？
现在我们必须做一些相当难闻的代码，其中控制器通过 erb 传递，以允许这样的事情：
// app/javascript/controllers/stage_filter_controller.js.erb
import { Controller } from 'stimulus'
export default class StageFilterController extends Controller {
// snip...
getPlotsUrl(siteId) {
var url = '<%= Rails.application.routes.url_helpers.plot_options_path %>'
url += `?site=${siteId}`
return url;
}
}
我一点也不喜欢这个，但不知道如何以其他方式做到这一点。
我的 Rails 6 应用程序出现错误，因为它找不到我的数据目标，但我不明白为什么。
\nChrome\xe2\x80\x99s 控制台中的错误：
\nUncaught Error: Missing target element "channel.messages"\n我的看法：
\n<div class="col-sm-10" data-controller="channel" data-channel-id="<%= @channel.id %>">\n <!-- Chat messages -->\n <div class="pr-6 py-4 flex-1">\n <div data-target="channel.messages">\n <%= render @channel.messages %>\n </div>\n <div class="pb-6 pr-4 flex-none">\n <div class="flex rounded-lg border-2 border-grey overflow-hidden">\n <span class="text-3xl text-grey border-r-2 border-grey p-2">\n <svg class="fill-current h-6 w-6 block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 10c0 .553-.048 1-.601 1H11v4.399c0 .552-.447.601-1 .601-.553 0-1-.049-1-.601V11H4.601C4.049 11 4 10.553 4 10c0-.553.049-1 .601-1H9V4.601C9 4.048 9.447 …在 Rails 6 安装中，我有以下内容：
控制器：
# app/controllers/foo_controller.rb
def bar
@items = [["firstname", "{{ FIRSTNAME }}"], ["lastname", "{{ LASTNAME }}"], ["company", "{{ COMPANY }}"]]
end
看法：
# app/views/foo/bar.html.erb
<p>Quia <span data-field="firstname">{{ FIRSTNAME }}</span> quibusd <span data-field="firstname">{{ FIRSTNAME }}</span> am sint culpa velit necessi <span data-field="lastname">{{ LASTNAME }}</span> tatibus s impedit recusandae modi dolorem <span data-field="company">{{ COMPANY }}</span> aut illo ducimus unde quo u <span data-field="firstname">{{ FIRSTNAME }}</span> tempore voluptas.</p>
<% @items.each do |variable, placeholder| %>
<div data-controller="hello">
<input
type="text"
data-hello-target="name"
data-action="hello#greet"
data-field="<%= variable %>"
value="<%= placeholder %>">
</div>
<% end %> …我正在开发 Rails 6 应用程序，我试图将所有显示的字符串存储在语言环境文件中。我有一个名为的刺激控制器countdown_controller.js：
import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
static values = {
message: { type: String, default: "Deal closed!" }
}
}
en.yml:
en:
deals:
status:
closed: "Deal closed!"
我想用作inI18n.t("deals.status.closed")的值而不是直接写入字符串。我不知道该怎么做。messageValuecountdown_controller.js
我的 HTML 页面上有以下控制器：
...
<div data-controller="parent">
<div data-target="parent.myDiv">
<div data-controller="child">
<span data-target="child.mySpan"></span>
</div>
</div>
</div>
...
该子控制器映射到以下child_controller.js类：
export default class {
static targets = ["mySpan"];
connect() {
document.addEventListener("myEvent", (event) => this.handleMyEvent(event));
}
handleMyEvent(event) {
console.log(event);
this.mySpanTarget; // Manipulate the span. No problem.
}
}
正如您所看到的，刺激控制器上有一个事件侦听器connect()，当它检测到事件被触发时，它会记录该事件并操作跨度目标。
myDiv当我从我的目录中替换目标内容时，问题就出现了parent_controller.js：
...
let childControllerHTML = "<div data-controller="child">...</div>"
myDivTarget.innerHTML= childControllerHTML;
...
现在，事件myEvent侦听器已启动，事件侦听器不会选择它一次，而是选择它两次（因为同一事件被记录了两次）。随着子 HTML 的每次替换，该事件都会比以前多记录一次。
我知道可以利用它来document.removeEventListener防止旧控制器仍然监听事件：
export default class {
static targets = ["mySpan"];
connect() { …如何将 StimulusJS 安装到 Ruby on Rails 应用程序？
文档提到webpack和npm，但没有提到 Rails 或 Yarn（在撰写本文时）。
（有点奇怪，因为 Stimulus 来自 Basecamp，他确实创造了 RoR ......）
我正在尝试进入stimulusJS
import { Controller } from 'stimulus'
export default class extends Controller {
static targets = [
'foo',
]
connect() {
const fooValue = this.fooTarget.value
console.log(this.fooValue) // 7
this.someFunction()
}
someFunction(){
console.log(this.fooValue) // undefined
}
}
我希望能够在连接上获取该值，因为我想知道它是否已更改。
我是 StimulusJS 的新手，我只想在用户添加新帖子时显示附加在其他帖子后面的帖子内容。一切似乎都有效，但帖子被附加了两次，因此看起来表单已提交了两次。
<div data-controller="posts">
<div data-target="posts.add">
</div>
<!-- this is from a rails partial but it's all inside the data-controller -->
<%= form_with scope: :post, url: posts_path, method: 'post', data: { action: "post#addBody" } do |form| %>
<%= form.text_field :content, class: "form-control", data: { target: "posts.body"} %>
<%= form.submit class: "btn btn-primary" %>
</div>
实际控制人：
import { Controller } from "stimulus"
export default class extends Controller {
static targets = ["body", "add"]
addBody() {
let content = this.bodyTarget.value;
this.addTarget.insertAdjacentHTML('beforebegin', …目前网上有没有可以将 ts 转换为 js 的转换器？我想使用这里的组件，但它们都是用 ts 编写的，而我的 Rails 应用程序不支持它。
例如这个文件
import { Controller } from "@hotwired/stimulus"
import { useTransition } from 'stimulus-use/dist/use-transition'
export default class extends Controller {
menuTarget: HTMLElement
toggleTransition: (event?: Event) => void
leave: (event?: Event) => void
transitioned: false
static targets = ['menu']
connect (): void {
useTransition(this, {
element: this.menuTarget
})
}
toggle (): void {
this.toggleTransition()
}
hide (event: Event): void {
// @ts-ignore
if (!this.element.contains(event.target) && !this.menuTarget.classList.contains('hidden')) {
this.leave()
}
}
} …根据刺激操作的参考表，您可以按照此处所述定义键盘事件描述符
因此，我有一个转到 video_container 控制器的按钮：
%button{type: "Button", data: {action: "keydown.k->video-container#playPause",
video: {container: {target: "playButton"}} Play
在我的控制器中：
playPause() {
alert("This event is working")
}
我将此用于点击事件：
%button{type: "Button", data: {action: "click->video-container#playPause",
video: {container: {target: "playButton"}} Play
但它不适用于 keydown 或 keyup 事件。我什至添加了 :prevent 选项来调用 PreventDefault() 但这也不起作用。
我错过了什么？
编辑更新
这里进一步修补。我发现我可以让回车键事件做一些事情：
%button{type: "Button", data: {action: "keydown.enter->video-container#playPause",
video: {container: {target: "playButton"}} Play
但其他的都不起作用。使用空格使文档向下移动。
我什至尝试了他们的复合修饰符 ctrl+a 的示例，但这也不起作用。