• Some content to be displayed/hidden conditionally based on a user's interaction (e.g., an address form where the list of states automatically changes based on the selected country).   
• 一些内容根据用户的操作显示和隐藏，比如：更加用户选择了某个国家，那对应的省份的显示。
• To update some content in real-time (e.g., a feed like Twitter where new Tweets automatically get added to the page).
• 去实时的更新内容（例如：推特的新的tweets自动增加到页面上）
• To lazy-load some parts of your pages (e.g., inside an accordion, you can load the titles and mark the details to be lazy-loaded to speed up load times).
• 延迟加载页面上的内容（例如：在一个折叠区域里，你可以加载标题并将细节标记为lazy-loaded用来加快加载时间。

• Turbo Drive
  • If you have used Turbolinks in the past, you will feel right at home with Turbo Drive. At its core, some JS code intercepts JavaScript events on your application, loads HTML asynchronously, and replaces parts of your HTML markup.
  • 如果你用过Turbolinks,你用Turbo Drive就像在家一样。它的核心是一些JS代码拦截JavaScript的事件，异步加载HTML，替换部分HTML的标记。
  • 
    
• Turbo Frames
  • Turbo Frames decouple parts of your markup into different sections that can be loaded independently.
  • Turbo Frame分离你的标记为不同的sections,然后可以独立的加载
  • For example, if you have a blog application, the content of your post and the comments are two related but independent parts of the page. You can decouple them so navigation works independently or even load them asynchronously with turbo frames.
  • 例如，如果你有一个blog，你的post和comments内容是2个相关但又是页面上独立的部分。你可以分离他们通过不同的导航打开，或者通过turbo frames异步加载。
• Turbo Streams
  • Turbo Streams offers utilities to easily bring in real-time data to your application. For example, let's say you are building a news feed like Twitter. You want to pull new tweets into a user's feed as soon as they are posted without reloading the page. Turbo Streams allow you to do this without writing a single line of JS.
  • Turbo Streams提供的功能可以很容易的在你的应用程序里面引入实时数据。例如，你创建了一个新闻比如Twitter.你想让把这个消息推给用户而不需要用户刷新页面。Turbo Streams允许你做这些而不写一句JS。
• Turbo Native
  • Turbo Native lets you build a native wrapper around your web application. Navigations and interactions will feel native without you having to redo all the screens natively.
  • Turbo Native 让你可以给你的web应用构建一个native wrapper原生的壳， 导航和交互就像原生应用一样，而不需要你再去为不同的设备开发。
  • You'll keep delivering the rest of the application through the web. That way, you can focus on the really interactive parts of your application and get them right.
  • 你将继续通过web提供delivering应用程序的其它功能。那样的话，你就能集中精力在应用程序真正的交互部分，并把它们做好。

<div data-controller="clipboard">
  PIN:
  <input data-clipboard-target="source" type="text" value="1234" readonly />
  <button data-action="clipboard#copy">Copy to Clipboard</button>
</div>

// src/controllers/clipboard_controller.js
import { Controller } from "@hotwired/stimulus";
 
export default class extends Controller {
  static targets = ["source"];
 
  copy() {
    navigator.clipboard.writeText(this.sourceTarget.value);
  }
}

1. Render each "page" inside its own frame by appending the page number to the frame id (e.g., turbo_frame_tag "posts_#{@posts.current_page}").
   通过给turbo_frame添加一个当前页的页数作为 frame id 的方式，把每页page 放进它自己的frame里，
2. Use a lazy frame for the next page so that it doesn't load automatically unless it comes into view.
   通过将下一页设置为 lazy frame ，下一页就不会自动加载，除非要展示下一页了。
   
   

<%= turbo_frame_tag "posts_#{@posts.current_page}" do %>
  <%= render @posts %>
  <% unless @posts.last_page? %>
    <%= turbo_frame_tag "posts_#{@posts.next_page}", :src => path_to_next_page(@posts), :loading => "lazy" do %>
      <%= render "loading" %>
    <% end  %>
  <% end  %>
<% end %>

class PostsController < ApplicationController
  def index
    @posts = Post.page(params[:page]).per(params[:per_page])
  end
end

Dynamic Forms
动态Froms

<!-- app/views/posts/new.html.erb -->
<div data-controller="refresh-form" data-refresh-form-url="<%= refresh_form_posts_url(:target => "new_post") %>">
  <%= render "form" %>
</div>
 
<!-- app/views/posts/_form.html.erb -->
<%= form_for(@post, :data => { :target => "refresh-form.form" }) do |f| %>
  <%= f.select :kind, options_for_select([["News", :news], ["Blog", :blog]], @post.kind), {}, data: { action: "change->refresh-form#refreshForm" } %>
 
  <%= f.select :category, options_for_select(categories_for_kind(@post.kind), @post.category) %>
<% end %>

// app/javascript/controllers/refresh_form_controller.js
import { Controller } from "stimulus";
import { put } from "@rails/request.js";
 
export default class extends Controller {
  static targets = ["form"];
 
  refreshForm() {
    put(this.data.get("url"), {
      body: new FormData(this.formTarget),
      responseKind: "turbo-stream",
    });
  }
}

class PostsController < ApplicationController
  def refresh_form
    @post = Post.new
    @post.attributes = post_params
    @post.valid?
    respond_to do |format|
      format.turbo_stream
    end
  end
end

<!-- app/views/posts/refresh_form.turbo_stream.erb -->
<%= turbo_stream.replace params[:target] do %>
  <%= render "form" %>
<% end %>

<!-- app/views/comments/index.html.erb -->
<div id="comments">
  <%= turbo_stream_from @post, :comments %>
 
  <% @comments.each do |comment| %>
    <%= render comment %>
  <% end %>
</div>

# app/models/comment.rb
class Comment < ApplicationRecord
  belongs_to :post
 
  after_create_commit :stream
 
  private
 
  def stream
    broadcast_prepend_later_to(post, :comments, target: :comments)
  end
end

# app/models/comment.rb
# ...
def stream
  broadcast_prepend_later_to(post, :comments,
                             target: :comments,
                             locals: { highlight: true })
end

<!-- app/views/comments/_comment.html.erb -->
<div <%= %s(data-controller="highlight") if local_assigns[:highlight] %>
  <%= comment.body %>
</div>

export default class extends Controller {
  connect() {
    this.element.classList.add("highlight");
    this.timeout = setTimeout(
      () => this.element.classList.remove("highlight"),
      3000
    );
  }
 
  disconnect() {
    clearTimeout(this.timeout);
  }
}

1. Turbo::FramesHelper for Turbo Frames.
2. Turbo::Broadcastable for broadcasting to Turbo Streams from the code.
3. Turbo::Streams::TagBuilder for broadcasting to Turbo Streams as part of inline controller actions.