在DOM中刺激目标必须嵌套在刺激控制器下吗?

Question

我所见过的所有为刺激构建控制器和目标的示例/教程都将目标嵌套在已声明为使用数据控制器的父元素下。

例如(来自手册:

<div data-controller="slideshow">
<button data-action="slideshow#previous"> ← </button>
<button data-action="slideshow#next"> → </button>
<div data-slideshow-target="slide">🐵</div>
<div data-slideshow-target="slide">🙈</div>
<div data-slideshow-target="slide">🙉</div>
<div data-slideshow-target="slide">🙊</div>
</div>

是否有任何建议或硬性规则要求目标必须嵌套在控制器下?

<div data-controller="slideshow">
<button data-action="slideshow#previous"> ← </button>
<button data-action="slideshow#next"> → </button>
</div>
<div id="someOtherDiv">
<div data-slideshow-target="slide">🐵</div>
<div data-slideshow-target="slide">🙈</div>
<div data-slideshow-target="slide">🙉</div>
<div data-slideshow-target="slide">🙊</div>
</div>

Answer 1

是。为了使目标与控制器相关，它们需要在控制器的范围内。这意味着您必须有一个具有data-controller="my-controller"的元素作为任何具有data-my-controller-target="myControllerTarget"的HTML元素的父元素。但是，可以在父元素上有一个控制器和一个目标，也可以将多个控制器分配给单个父元素。对于您提供的示例，我建议将控制器声明移动到一个公共父元素。