javascript - 在 Stimulus Controller 中使用 querySelector 检索动态元素时出现问题

Question

当在我的 Controller 中查询元素时，我无法检索我想要的元素，即使当我在浏览器控制台中运行相同的代码时它完美地找到了它们(我可以看到 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")
   }
}

感谢任何指导/帮助!

Answer 1

您能否提供一些有关 showFinished 的背景信息？行动于 slideshow Controller 被称为？我不认为 Stimulus 有任何反对 querySelector 的地方，因为它们似乎 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-name s。要使用此约定，您应该具有如下内容:

<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>我也不认为与您遇到的问题有任何关系。