Введение

В современной веб-разработке асинхронный рендеринг играет решающую роль в улучшении пользовательского опыта за счет обновления определенных частей веб-страницы без перезагрузки всей страницы. В среде Ruby on Rails AJAX Turbo в сочетании с асинхронным рендерингом предоставляет мощный набор инструментов для создания быстрых и отзывчивых веб-приложений. В этой статье мы рассмотрим различные методы и примеры кода для использования AJAX Turbo Async Render в Rails.

1. Использование удаленных форм

Один из самых простых способов использования AJAX Turbo Async Render в Rails — использование удаленных форм. Удаленные формы позволяют отправлять формы асинхронно, обновляя определенные части страницы без полной перезагрузки.

# app/views/posts/_form.html.erb
<%= form_with(model: @post, remote: true) do |form| %>
  <!-- Form fields -->
  <%= form.submit %>
<% end %>

# app/controllers/posts_controller.rb
def create
  @post = Post.new(post_params)
  respond_to do |format|
    if @post.save
      format.turbo_stream
      format.html { redirect_to @post, notice: 'Post was successfully created.' }
    else
      format.turbo_stream { render turbo_stream: turbo_stream.replace(@post, partial: "form", locals: { post: @post }) }
      format.html { render :new }
    end
  end
end

1. Турбо-кадры

Турбо-фреймы позволяют вам определять разделы ваших представлений Rails, которые можно обновлять независимо с помощью AJAX Turbo.

# app/views/posts/index.html.erb
<turbo-frame id="posts-frame">
  <%= render @posts %>
</turbo-frame>

# app/controllers/posts_controller.rb
def create
  @post = Post.new(post_params)
  respond_to do |format|
    if @post.save
      format.turbo_stream { render turbo_stream: turbo_stream.append("posts-frame", partial: "posts/post", locals: { post: @post }) }
      format.html { redirect_to @post, notice: 'Post was successfully created.' }
    else
      format.turbo_stream { render turbo_stream: turbo_stream.replace(@post, partial: "form", locals: { post: @post }) }
      format.html { render :new }
    end
  end
end

1. Турбо-стримы

Турбопотоки позволяют отправлять обновления клиенту в структурированном формате, обеспечивая детальный контроль над манипуляциями с DOM.

# app/controllers/posts_controller.rb
def create
  @post = Post.new(post_params)
  respond_to do |format|
    if @post.save
      format.turbo_stream { render turbo_stream: turbo_stream.append("posts", partial: "posts/post", locals: { post: @post }) }
      format.html { redirect_to @post, notice: 'Post was successfully created.' }
    else
      format.turbo_stream { render turbo_stream: turbo_stream.replace(@post, partial: "form", locals: { post: @post }) }
      format.html { render :new }
    end
  end
end

1. Обработка турбопотоков на стороне клиента

На стороне клиента вы можете обрабатывать обновления Turbo Streams, прослушивая соответствующие события и выполняя соответствующие манипуляции с DOM.

// app/javascript/controllers/posts_controller.js
import { Controller } from "stimulus"
export default class extends Controller {
  connect() {
    this.element.addEventListener("turbo:streams:render", this.handleStreamRender)
    this.element.addEventListener("turbo:streams:before-render", this.handleBeforeStreamRender)
  }
  disconnect() {
    this.element.removeEventListener("turbo:streams:render", this.handleStreamRender)
    this.element.removeEventListener("turbo:streams:before-render", this.handleBeforeStreamRender)
  }
  handleStreamRender(event) {
    const { detail } = event
    // Perform DOM manipulations based on the Turbo Stream updates
  }
  handleBeforeStreamRender(event) {
    // Perform operations before the Turbo Stream updates are applied
  }
}

Заключение

В этой статье мы рассмотрели различные методы использования AJAX Turbo Async Render в Rails. Используя удаленные формы, Turbo Frames, Turbo Streams и обработку Turbo Streams на стороне клиента, вы можете создавать быстрые и отзывчивые веб-приложения, обеспечивающие удобство работы с пользователем. Включение этих методов в ваши проекты Rails, несомненно, улучшит ваш процесс разработки и сделает ваши приложения более интерактивными.