TurboShiftフレームワークタグでインライン編集

3811 ワード
rails テキストリンク
私のお気に入りの1つのページアプリケーション(SPA)のトリックの1つは、ユーザーが何かを編集することができます(コメントのように)彼らは、少しRedditのようなページを残しなければならないことなく.
使用 turbo_frame_tag からのヘルパーhotwire-rails ジェム、私はコードの約4行でこれを達成することができた!私もJavaScriptに触れるか、既存のコントローラのコードを変更する必要はありませんでした.

暗号
<!-- app/views/comments/_comment.html.erb -->
<%= turbo_frame_tag dom_id(comment) do %>
  <blockquote>
    <%= comment.body %>

    <footer>
      <%= link_to 'Edit', [:edit, comment.post, comment] %> | <%= l comment.updated_at, format: :long %>
    </footer>
  </blockquote>
<% end %>

<!-- app/views/comments/edit.html.erb -->
<h1>Editing Comment</h1>

<%= turbo_frame_tag dom_id(@comment) do %>
  <%= render 'form', comment: @comment %>
<% end %>

<%= link_to 'Show', url_for([@comment.post, @comment]) %> |
<%= link_to 'Back', url_for([@comment.post]) %>

どのように、タグは働きますか?
The turbo_frame_tag ヘルパーメソッドは、コードのブロックを<turbo-frame id="comment_1"> タグ(divのようですが、魔法です).
そのタグ内のリンクをクリックすると、Turboは要求されたページにAJAX Typeリクエストを実行します<turbo-frame> 一致するIDを持つタグは、1つを見つけた場合、それはコンテンツを新しいコンテンツに置き換えます.
シンプルな角度アプリを行う-第2部
ノードをインストールするステップバイステップガイド.Ubuntuの上のJS