刺激：如何处理具有相同目标名称的重复项目答案

【问题标题】：Stimulus: how to handle repeating items with the same target name刺激：如何处理具有相同目标名称的重复项目
【发布时间】：2018-12-21 18:54:30
【问题描述】：

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

所以，编辑链接如下所示：

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

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

但是，我认为我遇到的问题是，因此该列表的所有行都有一个同名的数据目标，而错误的（第一个？）被绑定到目标。

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

唷，我希望你遵循了这一点。正确的处理方式是什么？

【问题讨论】：

只是为了确保我在同一个页面上，您是否将一个模式加载到您正在显示的每个项目的视图中？
我试图避免这种情况。我有一个模态表单标记实例，它可以显示以编辑正在编辑的特定行。
如果您使用 Rails 作为后端，就像您的其他问题似乎表明的那样，可能有一个更简单的非 Stimulus 解决方案。要使用 Stimulus，您需要从服务器或 DOM 获取项目的数据，将其显示在表单中，然后通过 JavaScript 将具有正确 ID 的正确表单提交给服务器。为什么不为每个项目提供一个远程link_to 按钮来编辑操作？ Rails 向edit 控制器操作获取JS 请求，您可以使用来自Ruby 对象的数据加载模式表单。如果您喜欢这种方法，我可以写一个完整的答案。
是的，听起来您对 Stimulus 的诊断方式是完全正确的，并且远程形式会更好、更容易。我的具体目标是真正学习 Stimulus，我做到了 :)但是这个用例有点复杂！
我认为 Stimulus 对于这种情况仍然是一个很棒的工具，只是不适用于您使用它的部分。我会利用这个机会制作一个 Stimulus 控制器，它可以监听ajax->send/error/complete 事件并自动禁用/启用按钮，在按钮上设置加载微调器，并关闭模式。这些至少是一些很好的地方，可以添加一些 Stimulus 让它们变得超级简单的功能。

标签： javascript stimulusjs

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

这实际上是 Stimulus 的一个很好的用途，因为它是模块化的。您为每一行添加一个控制器，而不是在页面或表格周围放置控制器。

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

【讨论】：