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

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 上存在的 Stimulus 控制器，Stimulus 文档建议使用 the built-in data API.

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

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

然后您可以通过调用 this.data.get("myValue")

从 Stimulus 控制器获取此值

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

Stimulus 文档 allow for Global Events 所以这个事件是被触发。但是发生这种情况时，触发的event.target是window，而不是你的<span>，所以当你调用event.target.dataset时，它正在寻找window的数据集，没有你的价值。

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

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

How to pass a data value to a stimulus controller upon a load event

ruby-on-rails

stimulusjs