向 Turbo 链接添加刺激点击操作？

Question

我正在显示页面上执行内联编辑功能，并使用涡轮加载的框架上方的“编辑”按钮。尝试在编辑按钮上添加一个开关，使其在编辑模式下切换到取消按钮。

我认为一个简单的刺激控制器就可以解决这个问题，除非您添加了data-action="click->edit-button#toggle"覆盖按钮上的涡轮动作的控制器。想法？有想法吗？

<div turbo-controller="edit-button">
  <a class="btn btn-sm btn-primary btn-outline" data-turbo-frame="project" data-edit-button-target="button" data-value="show" href="/foobar/234/edit">Edit</a>
  <turbo-frame id="project">
    content
  </turbo-frame>
</div>

Answer 1

最简单的解决方案是使用框架的一部分来呈现编辑链接和内容或取消链接和编辑表单，具体取决于本地变量设置。例如：

<turbo-frame id="project">
  <% if local_assigns[:editing] == true %>
    <a href="/foobar/123/cancel">Cancel</a>
    editing form....
  <% else %>
    <a href="/foobar/234/edit">Edit</a>
    content
  <% end %>
</turbo-frame>

默认情况下，这将呈现内容并编辑链接。在编辑请求中，您只需将部分渲染为editingtrue 即可。前任：

def edit
  foobar = Foobar.find(params[:id])
  render partial: 'foobar_editor', locals: { foobar: foobar, editing: true }
end

def cancel
  foobar = Foobar.find(params[:id])
  render partial: 'foobar_editor', locals: { foobar: foobar, editing: false }
end