为侧边栏导航进行简单的 Turbostream 更新而苦苦挣扎

Question

涡轮触发链接只是刷新我的用户显示视图的页面。

我尝试了

turbo_stream.replace

和

turbo_stream.update

也指向框架

rightmaincontent

但所发生的只是重新加载用户显示视图，这是

dance_journal

方法的后备部分。

我是否忽略了什么？我看到的所有教程和 ChatGPT 似乎都表明我的设置正确。

此外，我确实在网站上的其他一些页面上设置了用于分页的 Turbo 框架，因此我确信我已正确安装 Turbo。

在我的用户显示视图上，我有一个通过部分（布局/sidebar_content）呈现的侧边栏：

   <div class="sidebar-left">
      <%= render 'layouts/sidebar_content', user: @user %>
    </div>

还在用户展示视图上，我有一个部分包裹在涡轮框架中

rightmaincontent

：

<%= turbo_frame_tag 'rightmaincontent' do %>
<div class="main-content">
Main Content Divs
</div>
<% end %>

在 sidebar_content 部分内部，我有一个指向舞蹈日志路径的链接：

 <%= link_to 'Your Dance Journal', dance_journal_user_path(@user), data: { turbo_frame: 'rightmaincontent' }, class: 'nav-link' %>

我的舞蹈日记部分很简单，如下：

<div>
  <h3>Your Dance Journal</h3>
  <div class="container text-bg-light p-3 rounded">
    <h3>Your dance journal</h3>
    <div class="fs-6 fw-light">Keep track of your dance videos all in one place!</div>
    <br/>
    <p>Coming soon!</p>
  </div>
  <br>
</div>

在我的用户控制器内部，我有一个舞蹈日志方法，其中包含以下内容：

  def dance_journal
    @user = User.friendly.find(params[:id])
  
    respond_to do |format|
      format.turbo_stream do
        render turbo_stream: turbo_stream.update('rightmaincontent',
                                                partial: 'dance_journal',
                                                locals: { user: @user })
      end
      format.html { redirect_to user_path(@user) } # Fallback for non-Turbo Stream requests
    end
  end 

提前致谢！

Answer 1

链接发送 HTML 请求，除非您另外指定，这就是始终调用

format.html

块的原因。如果您想使用 Turbo 帧执行此操作，那么您必须使用匹配的 Turbo 帧来包装您的响应：

<!-- _dance_journal.html.erb -->

<%= turbo_frame_tag "rightmaincontent" do %>
  <div>
    <h3>Your Dance Journal</h3>
    ...
  </div>
<% end %>

并渲染它：

def dance_journal
  @user = User.friendly.find(params[:id])
  
  respond_to do |format| 
    format.html do
      render partial: "dance_journal", locals: {user: @user}
    end
  end
end

请注意，

data-turbo-frame

仅告诉turbo您要更新哪个帧以及在响应中查找哪个帧，它仍然是一个HTML请求：

<%= link_to "Your Dance Journal", dance_journal_user_path(@user),
  class: "nav-link",
  data: {turbo_frame: "rightmaincontent"} %>

---

如果您想使用 Turbo 流执行此操作，则必须将

data-turbo-stream="true"

添加到您的链接以使其成为 TURBO_STREAM 请求，在这种情况下不需要 Turbo 帧，您可以将其替换为 ``:

<%= link_to "Your Dance Journal", dance_journal_user_path(@user),
  class: "nav-link",
  data: {turbo_stream: "true"} %>

<div id="rightmaincontent">
  <div class="main-content">
    Main Content Divs
  </div>
</div>

def dance_journal
  @user = User.friendly.find(params[:id])
  
  respond_to do |format| 
    format.turbo_stream do
      render turbo_stream: turbo_stream.update(
        "rightmaincontent",
        partial: "dance_journal",
        locals: {user: @user})
    end
  end
end