如何在Rails和Turbo中使用Alpine.js

Alpine.js是我最喜欢的JavaScript库之一。它简单、快速，且易于集成，无需编写太多JavaScript代码。

对于那些主要在服务器端渲染（如通过Turbo）的Ruby on Rails应用程序，以及我不想使用React或Vue.js（甚至Stimulus）的情况下，Alpine.js提供了恰到好处的JavaScript。

在本教程中，我们将介绍如何在Rails应用中使用Alpine.js，以及如何添加以下UI元素：

• Flash消息（自动消失）
• 模态框

本教程的演示代码位于https://github.com/Code-With-Rails/alpinejs-demo。

在Rails中安装Alpine.js

对于我们的基础应用程序，我们将使用支持import maps的Rails 7。

bin/rails new rails-alpinejs-demo
cd rails-alpinejs-demo

bin/rails importmap:install
bin/importmap pin alpinejs
bin/importmap pin alpine-turbo-drive-adapter

添加到你的application.js：

import '@hotwired/turbo-rails'
import 'alpine-turbo-drive-adapter'
import Alpine from 'alpinejs'

window.Alpine = Alpine
Alpine.start()

一个简单的例子

<div x-data="{ open: false }">
  <button x-on:click="open = ! open">切换</button>
  <span x-show="open">我在这里！</span>
</div>

Alpine.js的美妙之处在于你不需要在其他地方编写额外的JavaScript代码。你可以声明元素如何响应用户发起的事件，并相应地改变数据状态。

构建Flash消息

使用Alpine.js的Flash消息可以通过x-init和setTimeout自动消失：

<%# app/views/layouts/_flash_message.html.erb %>
<%= turbo_frame_tag 'flash' do %>
  <% unless flash[:notice].blank? %>
    <div x-init="() => { flashShown = true; setTimeout(() => { flashShown = false }, 4000) };">
      <%= flash[:notice] %>
    </div>
  <% end %>
<% end %>

构建模态框

对于模态框，将Turbo Streams与Alpine.js过渡效果结合使用：

<div x-init="$nextTick(() => { isModalOpen = true })"
     x-show="isModalOpen"
     x-transition:enter="ease-out duration-300"
     x-transition:enter-start="opacity-0"
     x-transition:enter-end="opacity-100">
  <!-- 模态框内容 -->
</div>

结论

Alpine.js让我能够专注于服务器端渲染，并最大限度地减少所需的JavaScript代码量。当我使用Alpine.js并在其设计目的（需要JS的小型轻量级交互）范围内工作时，我的应用程序及其代码库感觉更加轻量。

我鼓励你查看演示应用的仓库https://github.com/Code-With-Rails/alpinejs-demo，亲自体验一下。