gpt4 book ai didi

ruby-on-rails - 在多个地方使用 Stimulus Controller

转载 作者:行者123 更新时间:2023-12-05 05:57:18 26 4
gpt4 key购买 nike

我希望能够在 Web 应用程序的多个位置使用 Stimulus Controller。我想做这样的事情:

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

<SomeOtherComponent />

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

但是 Controller 似乎只连接到第一个组件而不是第二个组件。是否可以像我打算的那样使用它?

谢谢!

最佳答案

刺激 Controller 可以重复使用。请参阅此示例。

如果存在 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>

关于ruby-on-rails - 在多个地方使用 Stimulus Controller,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68854831/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com