Bagaimanakah Aliran Turbo Berfungsi (di sebalik tabir)

Artikel ini pada asalnya diterbitkan di Rails Designer

---

Turbo Stream membolehkan anda mengemas kini bahagian tertentu apl anda atas permintaan web (tindakan pengawal), dirujuk sebagai hanya Turbo Stream. Atau sebagai Siaran Strim Turbo apabila dinyalakan oleh hujung belakang anda (pada model mencipta, mengemas kini atau memusnahkan atau secara manual daripada sebarang objek) melalui soket web, biasanya melalui ActionCable.

Walaupun sumbernya berbeza, respons (HTML) untuk kedua-duanya adalah sama. Saya ingin menerangkan dengan cepat cara Turbo Stream berfungsi, supaya anda faham bahawa terdapat, sama seperti dengan Rails, tiada sihir yang terlibat ??. JavaScript Lama Biasa!

Untuk menyiarkan Strim Turbo anda melakukan sesuatu seperti ini:

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

Dan untuk tindakan pengawal (atau sebaris dalam pengawal, jika itu kesesakan anda):

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

Jadi apakah respons (HTML) yang dihantar untuk kedua-dua pilihan?

<turbo-stream action="append" target="resources">
  <template>
    <!-- HTML content of the Resource -->
  </template>
</turbo-stream>

Itu kelihatan sangat teruk seperti respons Turbo Stream yang anda buat untuk tindakan pengawal! Satu-satunya perbezaan besar ialah templat-elemen yang dililitkan pada HTML (berasal daripada sebahagian atau ViewComponent). Elemen templat ialah bekas untuk menyimpan kandungan HTML yang disembunyikan.

? Anda boleh melihat respons seperti ini dalam alat dev penyemak imbas anda.

Setelah elemen aliran turbo disuntik ke dalam DOM, Turbo mengambil alih. turbo-stream tidak lebih daripada elemen tersuai. Ia ditakrifkan di sini. Anda boleh melihatnya seterusnya mentakrifkan fungsi connectedCallback(). Fungsi itu dipanggil setiap kali elemen ditambahkan pada dokumen; ini ialah ciri elemen tersuai.

Jadi apa yang berlaku seterusnya? Mari kita pergi ke bahagian yang paling penting, langkah demi langkah. Bersiap sedia! ?️?

1. acara tersuai, sebelumRenderEvent, dihantar;
2. acara ini memanggil fungsi renderElement;
3. kemudian performAction dipanggil;
4. tindakan yang ditakrifkan kemudian dipanggil.

Dalam fail terakhir itu, anda boleh melihat semua tindakan yang disokong, lalai, untuk Turbo Stream (tambah, tambah, ganti, dsb.). Jika anda, walaupun sedikit, biasa dengan JavaScript, anda harus memahami dengan mudah apa yang dilakukan oleh setiap tindakan berasingan (jika tidak; lihat JavaScript untuk Pembangun Rails?). Pada dasarnya, kecuali untuk tindakan buang; ambil HTML dari dalam templat-elemen dan tambahkannya pada DOM (berdasarkan tindakan; tambahkan, tambahkan, selepas, dsb.).

Dengan pengetahuan itu, anda mungkin melihat bahawa anda hanya boleh memasukkan elemen aliran turbo tersuai itu secara manual dan Turbo tahu untuk mengambilnya.

class Resource < ApplicationRecord
  after_create_commit -> { broadcast_append_to "resources" }
end

Hanya salin HTML di atas dan lihat dalam penyemak imbas. Anda akan melihat elemen li dilampirkan pada elemen ul. ? Kemudian menggunakan alat dev penyemak imbas anda, tampal elemen aliran turbo lain di mana-mana dalam DOM:

<turbo-stream action="append" target="resources">
  <%= render @resource %>
</turbo-stream>

Cukup keren, bukan? Turbo menggunakan banyak ciri daripada penyemak imbas untuk memberikan pengalaman pembangun yang lancar yang kita semua suka. Kini anda tahu cara Turbo Stream berfungsi di sebalik tabir!

Atas ialah kandungan terperinci Bagaimanakah Aliran Turbo Berfungsi (di sebalik tabir). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!