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

Question

我有一个 Stimulus 控制器

# 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，那么当我单击跨度时，代码将起作用并检索 id。我该如何解决？

Answer 1

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

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

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

然后你可以通过调用从你的 Stimulus 控制器获取这个值 this.data.get("myValue")

至于为什么data-action没有效果...

刺激文档都允许全球活动所以这个事件被触发。但是当发生这种情况时，触发的event.target是window，而不是您的<span>，因此当您调用 时event.target.dataset，它正在寻找 的数据集window，而该数据集没有您的值。

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