Стимул: как обращаться с повторяющимися предметами с одинаковым именем цели

У меня есть список пунктов, и у каждого есть ссылка, чтобы щелкнуть, чтобы отредактировать это. Я использую стимул, чтобы сделать редактируемую "модальную" форму видимой, когда они нажимают эту ссылку редактирования. Идентификатор того, что будет редактироваться, присутствует как id = в соответствующем теге ссылки списка

Итак, ссылка для редактирования выглядит следующим образом:

<td><a data-action="click->content#edit" data-target="content.editBtn" id="<%= url_for(content) %>")>Edit</a></td>

Идея состоит в том, что действие content # edit в контроллере стимула проверяет и находит его идентификатор и использует его для редактирования правой строки.

Однако проблема, с которой я столкнулся, заключается в том, что, как мне кажется, в результате все строки этого списка имеют цель с одинаковым именем, и неправильная (первая?) Привязывается к цели.

Однако, если бы я хотел сделать каждую цель данных отдельной, например, добавив к ней идентификатор, теперь у меня есть длинный список целей в controller.js, так что это не имеет смысла.

Фу, я надеюсь, ты следил за этим. Как правильно обращаться?

Источник

3 ответа

Решение

Если вы используете Rails в качестве бэкэнда, как, кажется, указывают ваши другие вопросы, возможно, существует более простое решение без стимула. Чтобы использовать Stimulus, вам необходимо получить данные для элемента с сервера или из DOM, отобразить их в форме, а затем отправить правильную форму с правильным идентификатором на сервер через JavaScript. Почему бы просто не иметь пульт link_to кнопка к edit действие для каждого элемента? Rails получает JS-запрос к edit действие контроллера, и вы можете загрузить модальную форму с данными из вашего объекта Ruby.

Если вы используете Stimulus для чего-либо в форме, я бы использовал эту возможность для создания контроллера Stimulus, который слушает ajax->send/error/complete события и автоматически отключает / включает кнопки, устанавливает загрузку спиннеров на кнопки и закрывает модальные. Это были бы хорошие области, чтобы посыпать некоторой функциональностью, которую Стимул делает очень простой.

Источник

На самом деле это хорошее использование Stimulus, поскольку оно модульное. Вы добавляете контроллер для каждой строки вместо того, чтобы держать контроллер вокруг страницы или таблицы.

      <tr data-controller="content">
  <td>
    <a data-action="click->content#edit" data-target="content.editBtn" id="<%= url_for(content) %>")>
      Edit
    </a>
  </td>
</tr>
Источник

У меня просто была похожая проблема.
Это помогло:https://codepen.io/smashingmag/pen/ExPprPG

В основном вы можете перебирать цели, например:

      for(let tgt of this.mySameNameTargets) {
  tgt.innerHTML = "Some Value"
}

Это при условии, что у вас есть это в контроллере:

      state targets = ["mySameName"]

Вы также можете использовать «Параметры действия», чтобы поместить идентификатор в каждую строку:https://stimulus.hotwired.dev/reference/actions#action-parameters .

Из этих документов это выглядит так:

      <div data-controller="item spinner">
  <button data-action="item#upvote spinner#start" 
    data-item-id-param="12345" 
    data-item-url-param="/votes"
    data-item-payload-param='{"value":"1234567"}' 
    data-item-active-param="true">…</button>
</div>

// ItemController
upvote(event) {
  // { id: 12345, url: "/votes", active: true, payload: { value: 1234567 } }
  console.log(event.params) 
}

Вы можете установить идентификатор элемента в этой строке в параметре, а затем, когда они нажмут на эту строку, вы сможете выкопать его из параметров.

Источник
Другие вопросы по тегам