如何在负载事件时将数据值传递给刺激控制器

Question

我有一个刺激控制器

# app/javascript/controllers/clubs_controller.js
// handles micropost javascripts
import { Controller } from "stimulus"
import Rails from '@rails/ujs';
export default class extends Controller {
connect() {
}
wait_for_clubs(event) {
event.preventDefault()
console.log("in wait_for_clubs", event.target)
const id = event.target.dataset.value
console.log("id", id)
}
}
}

和html代码

<div data-controller="clubs">
<span data-action="load@window->clubs#wait_for_clubs" data-value='<%= @user.id %>'>Waiting for Clubs to be prepared</span>
</div>

其思想是，当加载页面时，控制器具有用户的id。当我重新加载页面时，我在控制台中看到以下错误

TypeError: Cannot read property 'value' of undefined

其由CCD_ 1语句触发。

但是，如果我将事件从load@window更改为click，那么当我单击跨度时，代码会工作并检索id。我该如何解决此问题？

Answer 1

如果您试图在加载时将数据传递给DOM上存在的刺激控制器，则刺激文档建议使用内置数据API。

在您的情况下，这意味着向分配data-controller属性的DOM元素添加一个data-clubs-my-value属性，如下所示：

<div data-controller="clubs"
data-clubs-my-value="<%= @user.id %>">
</div>

然后您可以通过调用this.data.get("myValue")从您的刺激控制器获得该值

至于data-action为什么不起作用。。。

刺激措施文档允许全局事件，因此触发此事件。但当这种情况发生时，触发event.target是window，而不是您的var id = event.target.dataset.value;0，所以当您调用event.target.dataset时，它正在查找window的数据集，该数据集没有您的值。

如果您希望Stimulus控制器中的某个操作在页面加载时触发，处理此问题的最佳方法通常是使用connect()方法。