javascript - 刺激 : how to handle repeating items with the same target name

Question

我有一个项目列表，每个项目都有一个链接可以单击以对其进行编辑。当他们单击该编辑链接时，我正在使用刺激使编辑“模态”表单可见。将要编辑的内容的 id 以 id= 的形式出现在列表的相应链接标签上

因此，编辑链接如下所示:

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

想法是刺激 Controller 中的 content#edit 操作检查并找到它的 id，并使用它来编辑正确的行。

但是，我认为我遇到的问题是，结果这个列表的所有行都有一个同名的数据目标，而错误的(第一个？)绑定(bind)到目标。

但是，如果我想让每个数据目标不同，例如将 id 附加到它，现在我在 controller.js 中有一长串目标，所以这没有意义。

正确的处理方式是什么？

Answer 1

如果您使用 Rails 作为后端，就像您的其他问题似乎表明的那样，可能有一个更简单的非 Stimulus 解决方案。要使用 Stimulus，您需要从服务器或 DOM 获取项目的数据，将其显示在表单中，然后通过 JavaScript 将具有正确 ID 的正确表单提交给服务器。为什么不为每个项目设置一个远程 link_to 按钮来执行 edit 操作？ Rails 收到对 edit Controller 操作的 JS 请求，您可以使用从 Ruby 对象获得的数据加载模态表单。

如果您将 Stimulus 用于表单上的任何内容，我会利用这个机会制作一个 Stimulus Controller 来监听 ajax->send/error/complete 事件并自动禁用/启用按钮，在按钮上设置加载微调器，并关闭模式。这些将是很好的领域，可以加入一些 Stimulus 变得非常简单的功能。