Ошибка получения динамических элементов с помощью querySelectors в контроллере Stimulus.

Question

Запрашивая элементы в моем контроллере, я не могу получить нужные элементы, хотя, когда я запускаю тот же код в консоли браузера, он находит их идеально (я вижу, что идентификатор title1 в моем инспекторе, например). В этом смысле мне интересно, есть ли какая-то информация о Стимуле, которую я упускаю, о том, как извлечь определенные элементы, когда они не являются статичными, или почему Стимул не похож на querySelectors.

Код следующий:

а) в 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>

б) в 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 контроллер называется? Я не думаю, что Стимул имеет что-то против querySelectors, потому что они, кажется, используют их под капотом!

---

Я не уверен, что это как-то связано с проблемой, с которой вы столкнулись, но я хочу указать на что-то, связанное с соглашением об именах, используемым в Stimulus, на случай, если оно вызывает другие странные побочные эффекты. В документации для целей они показывают, что соглашение об именах для 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> тег, который я тоже не думаю, имеет отношение к проблеме, с которой вы столкнулись.