6

我有一个刺激控制器

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

4

1 回答 1

14

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

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

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

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

至于为什么data-action没有工作...

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

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

于 2020-09-21T00:27:37.103 回答