Улучшите свое приложение Rails 7 с помощью Stimulus.js и интеграции JavaScript

Stimulus.js — это скромный фреймворк JavaScript, дополняющий ваш HTML. Это идеальный компаньон для встроенных функций Rails. В этом посте мы рассмотрим, как использовать Stimulus.js для функциональности JavaScript, интегрировать его с другими библиотеками JavaScript и эффективно управлять зависимостями JavaScript с помощью Importmap.

Предварительные условия

Прежде чем мы начнем, убедитесь, что у вас есть следующее:

• Настройка приложения Rails 7
• Базовые знания JavaScript и Rails

Настройка Stimulus.js в Rails 7

Rails 7 поставляется с поддержкой Stimulus.js по умолчанию. Для начала убедитесь, что Stimulus включен в ваше приложение, выполнив:

rails new my_app
cd my_app

Вы можете найти контроллеры Stimulus в app/javascript/controllers.

Создание контроллера стимулов

Давайте создадим контроллер Stimulus для обработки простого события щелчка. Выполните следующую команду:

rails generate stimulus hello

Это создаст новый контроллер hello_controller.js в app/javascript/controllers. Откройте файл и добавьте следующий код:

// 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!'
  }
}

В HTML используйте контроллер Stimulus:

  

  Greet

При нажатии кнопки текст изменится на «Hello, World!».

Интеграция с другими библиотеками JavaScript

Stimulus.js может легко работать с другими библиотеками JavaScript. Например, давайте интегрируем jQuery со Stimulus.js.

Сначала добавьте jQuery с помощью Importmap:

Добавьте jQuery в ваш config/importmap.rb:

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

Затем импортируйте jQuery в контроллер Stimulus:

// 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!')
  }
}

Управление зависимостями JavaScript

Управлять зависимостями JavaScript в Rails 7 с помощью Importmap очень просто. Вот несколько советов:

• Добавьте библиотеку: Используйте пин-код «library_name» для: «library_url» в вашем config/importmap.rb, чтобы добавить новую библиотеку.
• Удалить библиотеку: Удалите соответствующую строку из config/importmap.rb, чтобы удалить существующую библиотеку.
• Обновление библиотек: Обновите URL-адреса в config/importmap.rb до последних версий.
• Проверьте устаревшие библиотеки: Посетите URL-адреса в config/importmap.rb, чтобы узнать, доступны ли более новые версии.

Вы также можете добавить в свой проект собственные файлы JavaScript. Поместите их в папку app/javascript и импортируйте туда, где это необходимо.

Заключение

Stimulus.js предоставляет мощный, но простой способ добавить функциональность JavaScript в ваше приложение Rails. Интегрируя его с другими библиотеками JavaScript, вы можете создать богатый и динамичный пользовательский интерфейс. Правильное управление зависимостями JavaScript гарантирует, что ваше приложение будет поддерживаться и оставаться актуальным.

Удачного программирования!