ruby 如何使用turbo流从特定div中删除元素?

zbq4xfa0  于 2023-08-04  发布在  Ruby
关注(0)|答案(1)|浏览(112)

我有一个页面3 div里程碑,achievedMilestones,inProgressMilestones
有一个操作可以更改里程碑的状态,以便在两种状态之间切换。
这就是风景

<div id="milestones" class="hidden p-4 flex flex-col gap-y-3" data-tabs-target="panel">
    <%= render @goal.milestones %>
  </div>
  <div id="achievedMilestones" class="hidden p-4 flex flex-col gap-y-3">
    <%= render @goal.milestones.where(status: 'achieved') %>
  </div>
  <div id="inProgressMilestones" class="hidden p-4 flex flex-col gap-y-3">
    <%= render @goal.milestones.where(status: 'in_progress') %>
  </div>

字符串
这是控制器动作

def update_progress
    @milestone.update_progress(params[:status])
    respond_to do |format|
      format.turbo_stream do
        if params[:status] == "achieved"
          render turbo_stream: [
            turbo_stream.prepend("achievedMilestones", @milestone),
            turbo_stream.replace(@milestone, partial: 'milestone', locals: { milestone: @milestone })
          ]
        elsif params[:status] == "in_progress"
          render turbo_stream: [
            turbo_stream.prepend("inProgressMilestones", @milestone),
            turbo_stream.replace(@milestone, partial: 'milestone', locals: { milestone: @milestone })
          ]
        end
      end
    end
  end


有没有一种方法可以将元素从它的旧div中移到正确的div中,而不像

turbo_stream.remove("#achievedMilestones #milestone_#{@milestone.id}"),


还是应该直接使用StimulusJS

kg7wmglp

kg7wmglp1#

你也可以共享_milestone.html.erb文件,
也许你也可以发送字符串local到_milestone partial,用于不同的状态:

<%= render @goal.milestones.where(status: 'achieved'), locals: { parent_id: 'achievedMilestones' } %>

字符串
并将其注入dom_id中,如=> #{parentId}_#{milestone.id} in _milestone.html.erb

<div id='<%= "#{parent_id}_#{milestone.id}" %>'>


现在你可以在turbo_stream中使用这个div元素:

turbo_stream.remove("#achievedMilestones_#{@milestone.id}")

相关问题