Rails 使用 Turbo 处理 modal 弹框和下拉加载的方法和遗留问题

as181920 · 2021年06月28日 · 最后由 charlie_hsieh 回复于 2021年07月02日 · 413 次阅读

从 Turbolinks 升级到 Turbo 后,先升级后补课中,2 个常见功能的处理:

  1. 手机端常见的下拉到底部加载下一页,之前做法是 js 判断到底部后,remote get 下一页数据,通过 js.erb 来 append html。使用 turbo frame 可以不写 js,不改动 controller 的情况下,直接 view 层 list 展示时,通过嵌套 lazy load turbo_frame,当其进入视窗自动加载来实现。
<%= turbo_frame_tag "posts_#{@posts.current_page}" do %>
  <%= render "post_list" %>

  <% unless @posts.last_page? %>
    <% turbo_frame_tag "posts_#{@posts.next_page}", loading: :lazy, src: url_for(page: @posts.next_page) do %>
      <div>loading...</div>
    <% end %>
  <% end %>
<% end %>

遗留问题:某些场景下拉到底部显示加载中的等待体验不满足客户需求,需要在下拉到一半时就预先加载下一页,还没有想到处理方法。

  1. 常见的点击编辑按钮弹出 modal 的情况,之前同样是 remote get 后通过 js.erb 来 append modal 框。turbo 可以通过 link 的 data 属性指向 trubo frame id 来 load modal 内容 (弹出 modal)
<%# index.html.erb %>
<%= link_to "edit", [:edit, post], data: {turbo_frame: "modal_frame_id" }%>
<%= turbo_frame_tag "modal_frame_id" , target: "_top", class: "modal_frame" %>
<%# edit.html.erb%>
<%= turbo_frame_tag "modal_frame_id" %>
  <div class="modal">
    <div>modal content</div>
    <%= button_tag "Cancel", data: {dismiss: "modal"}, onclick="this.closest('.modal_frame').src='';this.closest('.modal').remove();" %>
  </div>
<% end %>

遗留问题:由于是 get 请求,重复点击时候如何重新渲染没解决,通过 src 清空临时处理;这里 dismiss 自动关闭没生效,通过 onclick 临时 remove 内容;想知道正确的处理方法。

第一个真是太黑科技了

关于下拉一半的问题,翻了下源码,你可以自己判断加载的时机,然后用frameElement.delegate.loadSourceURL()来手动触发 frame 的加载

mizuhashi 回复

刚手动调试,监听 scroll 判断后,js 主动把下一个 turbo_frame 的 loading 设置为 eager 是可行的(再下一个依旧是 lazy load,同样逻辑页面到一定位置后修改为 eager)。

Turbo 是好东西,但有时候再搭配个 Stimulus 更方便

Turbo 负责渲染 dom, Stimulus 负责干其他活

Turbo 用了一下,放弃了

huacnlee 回复

请问一下,放弃的原因是?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号