stimulusjs - 向 Stimulus 组件添加默认操作的最佳方式是什么？

Question

当创建一个 Stimulus 组件时，它应该始终对特定事件(例如“悬停”)执行相同的操作，设置该操作的首选方法是什么？

我想这样写，例如:

<a data-controller="tooltip" title="something">Show a tooltip on hover</a>

代替

<a data-controller="tooltip" title="something" data-action="hover->tooltip#showTooltip">Show a tooltip on hover</a>

如果 Stimulus 组件的唯一目的是在悬停时显示工具提示，那么包括 data-action="hover->tooltip#showTooltip" 对我来说感觉非常多余。

我现在通过在 initialize() 函数中手动添加事件监听器来执行此操作，但我不确定这是否是个好主意:

export default class Tooltip extends Controller { 
  initialize(){
    this.element.addEventListener("hover", showTooltip())
  }

  showTooltip(){
    // ...
  }
}

Answer 1

据我所知，Stimulus 没有默认事件支持，但是手动添加事件监听器是可行的，只是不要在 initialize() 方法中这样做。使用 connect() 添加监听器，使用 disconnect() 删除它。我将展示一个带有 click 事件的示例，但它应该与 hover 一起工作。

您的监听器必须将 Controller 作为 this，否则您将无法访问目标和值。这就是我添加以下内容的原因:this.clickListener = this.confirm.bind(this);。或者您可以使用箭头函数代替 bind，如下所示:

this.clickListener = (event) => this.confirm(event);

两者的工作原理相同。所以这里是完整的例子:

import { Controller } from 'stimulus';

export default class extends Controller {
    connect() {
        this.clickListener = this.confirm.bind(this);
        this.element.addEventListener('click', this.clickListener);
    }

    disconnect() {
        this.element.removeEventListener('click', this.clickListener);
    }

    confirm(event) {
        event.preventDefault();
        console.log(event);
    }
}