Rails和AlpineJS：婚礼时间
请看一下AlpineJS的官方文档。AlpineJS在这里是为了增强已经由服务器渲染的HTML在浏览器中的行为。就像jQuery那样。就像现在的Hotwire for Rails一样。所以你可以把AlpineJS看作是jQuery或Hotwire的一个可行的替代品。一些Rails开发者喜欢Alpine，他们有时称它为 "类似于Tailwind的JS框架"，因为它有一个非常可读的、声明性的方法。
创建一个新的Rails应用程序
$> ruby -v
ruby 3.1.0p0 // you need at least version 3 here
$> bundle -v
Bundler version 2.2.11
$> npm -v
8.3.0 // you need at least version 7.1 here
$> yarn -v
1.22.10
现在打开你常用的工作区，然后输入
mkdir alpinerails && cd alpinerails
echo "source 'https://rubygems.org'" > Gemfile
echo "gem 'rails', '7.0.2.3'" >> Gemfile
bundle install
bundle exec rails new . --force
你现在有一个新鲜的、新的、默认的Rails 7应用，安装在 "alpinerails "目录下--这也是这个小应用的名字，非常适合做教程。
第一个Ruby-on-Rails文件
AlpineJS在视图部分，但不幸的是，每个新的Rails应用程序都没有任何视图、模型或控制器。
创建一个控制器。
# inside app/controllers/home_controller.rb
class HomeController < ApplicationController
end
配置一个默认路由。
# inside config/routes.rb
Rails.application.routes.draw do
get "home/index"
root to: "home#index"
end
现在只需复制/粘贴下面的代码到app/views/home/index.html.erb中。
<!-- inside app/views/home/index.html.erb -->
<h1>Welcome, this is the home page</h1>
创建一个空的数据库，并运行Web服务器。
~/workspace/alpinerails$> bin/rails db:create
~/workspace/alpinerails$> bin/rails db:migrate
~/workspace/alpinerails$> bin/rails s
如果你在http://localhost:3000，打开你的网页浏览器，你应该看到h1标题 "欢迎，这是主页"。
现在添加AlpineJS
运行
~/workspace/alpinerails$> ./bin/importmap pin alpinejs@3.10.2
现在在你的工作区寻找 "alpinejs "这个词的出现。config/importmap.rb 应该已经改变了。
题外话：在BootrAils，我们更喜欢用ViteJS和Rails，在前端资产管理方面，从开发到生产，它比Rails的默认值更好。然而，对于一个小教程来说，我们坚持使用Rails的 "importmap "功能。
现在是时候让我们的Rails应用程序具有操作Alpine全局对象的能力了
// inside app/javascript/application.js
// add these two lines
import Alpine from "alpinejs"
window.Alpine = Alpine
显示结果
重新启动你的Rails服务器。在浏览器中显示主页。
本地主机
在Rails视图中注入一些AlpineJS代码
像这样改变app/views/home/index.html.erb 。
<h1>Welcome, this is the home page</h1>
<div x-data="{ count: 0 }">
<button x-on:click="count++">Increment</button>
<span x-text="count"></span>
</div>
像这样修改你的application.js 。
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"
import Alpine from "alpinejs"
window.Alpine = Alpine
document.addEventListener("DOMContentLoaded", function(event) {
window.Alpine.start();
});
现在你应该看到主页上的计数器了，每次你按下相应的按钮，它都会自动递增。
这就是我们的Rails和AlpineJS的 "Hello world！"教程。
如果你过去已经玩过KnockoutJS或AngularJS或任何同等的库，到目前为止没有什么惊喜。但有一个好消息：仍然有地方可以使用更多的声明性、更简单的JS库。
如果你对任何JS UI库都不熟悉，你可以去看AlpineJS文档的入门部分，它将帮助你掌握模板、事件等概念。
AlpineJS vs Hotwire：集中式状态
正如我们前面所说，AlpineJS可以被看作是Hotwire的替代品，更确切地说，是StimulusJS部分的替代品。
一个明显的区别是对集中式状态的使用。在Redux中，集中状态是 "单一来源"，它实际上是每个视图（或视图的每个小组件）应该引用的模型，以显示一些东西。
在Hotwire中，不存在这样的概念：你的HTML是唯一的真相来源，这完全不需要任何额外的对象来表示视图的数据。
有很多Rails开发人员都对这一点感到满意和舒适。当然，你的想法可能会有所不同，但就我们的尝试而言，我们发现StimulusJS并不能解决一些角落的问题。而拥有一个集中的状态对于调试和维护最复杂的用例是非常有用的。
总结
从这里开始，可能有很多事情要讲。从服务器注入数据，只属于视图的数据（比如哪个手风琴被打开），如何从AlpineJS发送数据，可能还有更多场景。然而，我们已经涵盖了基础知识：如何将一个现代的、简单的、声明式的JS库注入到你的Rails视图中。请注意，"Hello world!"的教程永远不会接近现实生活中的问题。祝您好运!
