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

as181920 · June 28, 2021 · Last by charlie_hsieh replied at July 02, 2021 · 539 hits

从 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 的加载

Reply to mizuhashi

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

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

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

Turbo 用了一下,放弃了

Reply to huacnlee

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

You need to Sign in before reply, if you don't have an account, please Sign up first.