Techioz Blog

刺激なしでターボ フレームをリロードしますか?

概要

https://translate.google.com/translate?hl=ja&sl=en&tl=ja&u=https://web-crunch.com/posts/turbo-charged-real-time-search-ruby-on-rails-7

私はこのチュートリアルに従って、Turbo をアプリに組み込みます。ただし、アセット パイプラインに多くの KB が追加されるように見えるため、Stimulus gem をインストールする必要はないことを望みます。プレーンな Javascript で同じ動作を実装する方法はありますか?つまり、 「入力」イベントでターボ フレームのみをリロードします。

チュートリアルの関連コード:

Turbo Frame を更新するフォーム:

<%= form_with(url: bands_path, method: :get, data: {turbo_frame: "bands"}) do |form| %>

  <%= form.label :query, "Search by band name:", class: "block mb-2" %>
  <div class="flex space-x-3">
    <%= form.text_field :query, class: "py-3 px-4 rounded border ring-0 focus:ring-4 focus:ring-orange-100 focus:shadow-none focus:border-orange-500 focus:outline-none" %>

    <%= form.submit 'Search', class: "px-4 py-3 font-medium
  bg-orange-300 text-neutal-900 rounded flex items-center cursor-pointer hover:bg-orange-400 focus:ring-4 ring-0 focus:ring-orange-100" %>
  </div>
<% end %>

ターボフレーム部分:

<!-- app/views/bands/_bands.html.erb-->
<%= turbo_frame_tag "bands" do %>
  <%= render bands %>
<% end >

刺激コントローラー:

// application/javascript/controllers/search_form_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="search-form"
export default class extends Controller {
  search() {
    clearTimeout(this.timeout)
    this.timeout = setTimeout(() => {
      this.element.requestSubmit()
    }, 200)
  }
}

私たちが試みたのは、ターボ フレームの src パラメータを入力時の新しい検索に設定することですが、これは新しい Turbo_frame_request を生成しないようです。

<%= form.text_field :query, oninput: "bands.src=`${location.href}?query=${this.value}`" %>

解決策

スティミュラス コントローラーと同じことを行うだけです - フォームを送信します。

<%= form_with url: request.path, method: :get, data: {turbo_frame: :bands} do |form| %>
  <%= form.text_field :q, oninput: "search(event)" %>
<% end %>

<%= turbo_frame_tag :bands, data: {turbo_action:  :advance} do %>
  <%= params[:q] %>
<% end %>

<script charset="utf-8">
  function search(event) {
    event.target.closest("form").requestSubmit()
  }
</script>

また、Stimulus は 12kb 圧縮されており、CDN から取得できます。これを回避してもスペースは節約されません: https://www.jsdelivr.com/package/npm/stimulus。