在 Stimulus 控制器中使用 querySelector 检索动态元素的问题答案

【问题标题】：Issue retreiving dynamic elements with querySelectors in Stimulus controller在 Stimulus 控制器中使用 querySelector 检索动态元素的问题
【发布时间】：2019-08-21 17:14:49
【问题描述】：

在我的控制器中查询元素时，我无法检索我想要的元素，即使当我在浏览器控制台中运行相同的代码时它也能完美地找到它们（我可以在我的 Inspector 中看到 id 是 title1 ，例如）。从这个意义上说，我想知道是否缺少一些关于如何在特定元素不是静态时检索特定元素的 Stimulus 信息，或者 Stimulus 不喜欢 querySelectors 的原因。

代码如下：

a) 在app/views/legislations/show.html.erb:

<div data-controller="slideshow">
<% titles.each do |title| %>
   <div id="title<%= title.number %>" data-target="slide">
      <h3>Title <%= title.number %>
   </div>
<% end %>
</div>

b) 在app/javascript/controllers/slideshow_controller.js:

import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "slide" ];

   showFinished(){
     var firstSection = document.getElementById("title1")
   }
}

任何指导/帮助表示赞赏！

【问题讨论】：

标签： javascript html ruby-on-rails ruby-on-rails-5 stimulusjs

【解决方案1】：

您能否提供一些有关何时调用 slideshow 控制器中的 showFinished 操作的上下文？我不认为 Stimulus 对 querySelectors 有任何反对，因为它们在 make use of them 的幕后看起来！

我不确定这与您遇到的问题有什么关系，但我想指出一些与 Stimulus 中使用的命名约定相关的内容，以防它引起其他奇怪的副作用。在documentation for Targets 中，它们表明data-target 的命名约定是controller-identifier.target-name：

<div data-controller="search">
  <input type="text" data-target="search.query">
  <div data-target="search.errorMessage"></div>
  <div data-target="search.results"></div>
</div>

在本例中，search 是 controller-identifier，query、errorMessage 和 results 是 3 个不同的 target-names。要使用这个约定，你应该有这样的东西：

<div data-controller="slideshow">
<% titles.each do |title| %>
   <div id="title<%= title.number %>" data-target="slideshow.slide">
      <h3>Title <%= title.number %></h3>
   </div>
<% end %>
</div>

注意：我还添加了一个缺失的 </h3> 标签，我也不认为这与您遇到的问题有任何关系。

【讨论】：