Tingkatkan pp Rails Anda dengan Stimulus.js dan Integrasi JavaScript

Tingkatkan Apl Rails 7 Anda dengan Stimulus.js dan Penyepaduan JavaScript

Stimulus.js ialah rangka kerja JavaScript sederhana yang menambah HTML anda. Ia adalah teman yang sempurna untuk fungsi terbina dalam Rails. Dalam siaran ini, kami akan meneroka cara menggunakan Stimulus.js untuk fungsi JavaScript, menyepadukannya dengan perpustakaan JavaScript lain dan mengurus kebergantungan JavaScript dengan berkesan menggunakan Importmap.

Prasyarat

Sebelum kami bermula, pastikan anda mempunyai perkara berikut:

• Persediaan aplikasi Rails 7
• Pengetahuan asas JavaScript dan Rails

Menyediakan Stimulus.js dalam Rails 7

Rails 7 disertakan dengan sokongan lalai untuk Stimulus.js. Untuk bermula, pastikan Rangsangan disertakan dalam aplikasi anda dengan menjalankan:

rails new my_app
cd my_app

Anda boleh menemui pengawal Rangsangan dalam apl/javascript/pengawal.

Mencipta Pengawal Rangsangan

Mari kita cipta pengawal Rangsangan untuk mengendalikan acara klik mudah. Jalankan arahan berikut:

rails generate stimulus hello

Ini akan menjana pengawal baharu hello_controller.js dalam app/javascript/controllers. Buka fail dan tambah kod berikut:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    this.outputTarget.textContent = 'Hello, World!'
  }
}

Dalam HTML anda, gunakan pengawal Rangsangan:

<div data-controller="hello">
  <h1 data-hello-target="output"></h1>
  <button data-action="click->hello#greet">Greet</button>
</div>

Apabila butang diklik, teks akan bertukar kepada "Hello, World!".

Mengintegrasikan dengan Perpustakaan JavaScript Lain

Stimulus.js boleh berfungsi dengan lancar dengan perpustakaan JavaScript lain. Sebagai contoh, mari kita integrasikan jQuery dengan Stimulus.js.

Pertama, tambah jQuery menggunakan Importmap:

Tambah jQuery pada config/importmap.rb anda:

pin "jquery", to: "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"

Kemudian, import jQuery dalam pengawal Rangsangan anda:

// app/javascript/controllers/hello_controller.js
import { Controller } from "@hotwired/stimulus"
import $ from "jquery"

export default class extends Controller {
  static targets = ["output"]

  connect() {
    this.outputTarget.textContent = 'Hello, Stimulus!'
  }

  greet() {
    $(this.outputTarget).fadeOut().fadeIn().text('Hello, jQuery!')
  }
}

Menguruskan Ketergantungan JavaScript

Mengurus kebergantungan JavaScript dalam Rails 7 adalah mudah dengan Importmap. Berikut ialah beberapa petua:

• Tambah perpustakaan: Gunakan pin "library_name", untuk: "library_url" dalam konfigurasi/importmap.rb anda untuk menambah perpustakaan baharu.
• Alih keluar perpustakaan: Alih keluar baris yang sepadan daripada config/importmap.rb untuk mengalih keluar perpustakaan sedia ada.
• Kemas kini perpustakaan: Kemas kini URL dalam config/importmap.rb kepada versi terkini.
• Semak perpustakaan usang: Lawati URL dalam config/importmap.rb untuk melihat sama ada versi yang lebih baharu tersedia.

Anda juga boleh menambah fail JavaScript tersuai pada projek anda. Letakkannya dalam folder apl/javascript dan importnya di mana perlu.

Kesimpulan

Stimulus.js menyediakan cara yang berkuasa namun mudah untuk menambahkan fungsi JavaScript pada aplikasi Rails anda. Dengan menyepadukannya dengan perpustakaan JavaScript lain, anda boleh mencipta pengalaman pengguna yang kaya dan dinamik. Mengurus kebergantungan JavaScript anda dengan betul memastikan aplikasi anda kekal boleh diselenggara dan dikemas kini.

Selamat mengekod!

Atas ialah kandungan terperinci Tingkatkan pp Rails Anda dengan Stimulus.js dan Integrasi JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!