1

我希望能够在 Web 应用程序的多个位置使用刺激控制器。我想做这样的事情：

<div data-controller="mycontroller">
  <OneComponent />
</div>

<SomeOtherComponent />

<div data-controller="mycontroller">
  <NewComponent />
</div>

但是控制器似乎只是连接到第一个组件而不是第二个。是否可以按照我的意图使用它？

谢谢！

4

1 回答 1

0

刺激控制器可以重复使用。请参阅此示例。

如果存在 JS 错误，或者您希望嵌套组件中的元素在尚未呈现的情况下在父组件中使用，则可能会阻止此操作的可能问题。

const application = Stimulus.Application.start()

application.register("hello", class extends Stimulus.Controller {
  connect() {
    console.log("connect to", this.element.getAttribute("data-language"))
  }
  
  static get targets() {
    return [ "name" ]
  }
  
  greet() {
    if (this.element.getAttribute("data-language") == "es-ES") {
      console.log(`¡Hola, ${this.nameTarget.value}!`);
    } else {
      console.log(`Hello, ${this.nameTarget.value}!`);
    }
  }
})
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
</head>
<body>
  <div data-controller="hello" data-language="en-US">
    <input data-hello-target="name" type="text" value="John">
    <button data-action="click->hello#greet">Greet</button>
  </div>
  
  <div data-controller="hello" data-language="es-ES">
    <input data-hello-target="name" type="text" value="Jose">
    <button data-action="click->hello#greet">Saudar</button>
  </div>
</body>
</html>

于 2021-09-08T11:31:57.057 回答