如何在发生负载事件时将数据值传递到激励控制器

问题描述

我有一个刺激控制器

# 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。我该如何解决？

解决方法

如果您试图在加载时将数据传递给DOM上存在的Stimulus控制器，则Stimulus文档建议使用the built-in data API。

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

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

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

从Stimulus控制器获取此值。

关于data-action为何不起作用...

刺激文档执行allow for Global Events，因此触发了该事件 。但是，发生这种情况时，触发event.target是window，而不是您的<span>，因此，当您调用event.target.dataset时，它会寻找window的数据集，它没有您的价值。

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