ruby-on-rails 使用Hotwire重新加载涡轮框架(Stimulus/Turbo/Rails)

oug3syen  于 2023-05-02  发布在  Ruby
关注(0)|答案(1)|浏览(176)

最近一两个月,我在使用Hotwire,试图了解如何在第一次渲染后重新加载特定的涡轮框架。
假设我有一个简单的rails控制器用于用户搜索。如果它的参数为name,则返回与该name匹配的用户,否则返回所有用户。

class UserSearchController
  def show
    return User.where(name: params[:name]) if params[:name].present?

    return User.all
  end
end

我有一个Turboframe,它正确地延迟加载DOM中的所有用户。我想弄清楚的是如何更新涡轮框架并重新绘制框架。我在Stimulus上玩了一下,试图将src设置为端点,这是我在其他帖子中看到的建议:

reload() {
    const {src: src} = this;
    this.src = null;
    this.src = src;
  }

这似乎不工作,虽然,它不重绘涡轮机。我可以看到它正在向rails后端发出请求。
有没有人能在页面加载后为我指出重新加载/重新绘制框架的方向?我不确定我是完全错了还是在正确的球场上。

56lgkhnf

56lgkhnf1#

show操作或render locals: {..中需要一些示例变量,否则将返回空值。在 stimulus controller中,this是指控制器示例,如果看不到它的其余部分,它看起来什么也不做。
将此复制到任何页面,然后单击以重新加载:

<%= turbo_frame_tag :reloadable, style: "display:none;" do %>
  <%= request.uuid %>
<% end %>

# clicking this frame will load that ^ frame, because it's first.
<%= turbo_frame_tag :reloadable, src: request.url, onclick: "reload()" %>

“我知道,我知道。”把它放在单独的页面上,不再重复。*
因为onclick不是一件很酷的事情:

// app/javascript/controllers/hello_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  reload() {
    this.element.reload();

    // this works as well
    // this.element.src = this.element.src;

    // not sure if you would ever need to do it this way
    // this.element.removeAttribute("complete");
  }
}
<%= turbo_frame_tag(:reloadable, style: "display:none;") { request.uuid } %>

<%= turbo_frame_tag :reloadable, src: request.url,
  data: {
    controller: "hello",
    action: "click->hello#reload"
  }
%>
  • https:// www.example.com

关于搜索表单:

# app/views/any/where.html.erb

<%= form_with url: "/users", method: :get,
  data: {turbo_frame: :users} do |f| %>

  <%= f.search_field :name, placeholder: "search by name" %>
  <%= f.button "Search" %>
<% end %>

# load this frame from `src`. load it again from the form submission response.
<%= turbo_frame_tag :users, src: "/users", target: :_top %>
# app/views/users/index.html.erb

<%
  scope = User.all
  scope = scope.where(name: params[:name]) if params[:name].present?
  @users = scope
%>

<%= turbo_frame_tag :users, target: :_top do %>
  <% @users.each do |user| %>
    <%= user.name %>
  <% end %>
<% end %>
  • https:// www.example.com

相关问题