如何在加载事件中向刺激控制器传递数据值

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

该语句由事件 var id = event.target.dataset.value; 触发。

但是，如果我将事件从 load@window 更改为 click，那么当我点击该 span 时，代码可以正常工作并检索 ID。 我该怎么办？

- Obromios

Answer 1

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

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

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

然后，您可以通过调用this.data.get("myValue")从您的Stimulus控制器中获取此值。

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

Stimulus文档确实允许全局事件，因此此事件确实被触发。但是当这种情况发生时，触发的event.target是window，而不是您的<span>，因此当您调用event.target.dataset时，它正在寻找window的数据集，而不是您的值。

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

- Ray

---

注意到属性名需要使用 kebab case，例如 data-clubs-my-value，然后你可以在控制器中使用 camel case 获取它，例如 this.data.get("myValue")。 - sq1020