从 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 内容；想知道正确的处理方法。