前端状态管理：Stimulus实战指南

### 前端状态管理：Stimulus 实战指南 #### 1. 确保显示更新 为了确保显示能实时更新，我们需要对 `ConcertController` 中的方法进行一处小改动，以监控剩余票数的值。以下是修改后的代码： ```typescript import { Controller } from "stimulus" export default class ConcertController extends Controller { static targets = ["tickets"] ticketsTarget: HTMLElement static values = { id: Number, soldOut: Boolean, ticketsRemaining: Number } soldOutValue: boolean ticketsRemainingValue: number ticketsRemainingValueChanged(): void { if (this.ticketsRemainingValue === 0) { this.ticketsTarget.innerText = "Sold Out" } else { const ticketsRemaining = `${this.ticketsRemainingValue} Tickets Remaining` this.ticketsTarget.innerText = ticketsRemaining } } } ``` 这样修改后，当你在一个浏览器中打开日程页面，在另一个浏览器中打开音乐会页面时，在音乐会页面选择座位，日程页面上的剩余票数列表会相应更新。 #### 2. 前端状态管理概述 在前端开发中，状态管理是一个重要的问题。状态指的是前端为了在屏幕上绘制正确信息并妥善管理用户交互所需的一组值。在 Hotwire 和 Stimulus 的环境中，状态和数据主要通过调整各种 DOM 元素的数据集，并利用浏览器和 Stimulus 控制器来处理这些信息。通常，一个 Hotwire 和 Stimulus 应用可能会使用外部类来管理仅客户端的抽象，但可能不需要一个独立于 DOM 的类来专门管理应用的状态。 #### 3. 使用数据值进行逻辑处理 ##### 3.1 日程页面需求 日程页面顶部有一排日历日期和“Show All”按钮。之前我们添加了 `CssController` 让这些日期显示或隐藏红色边框，以指示哪个日期是活动的，但没有将该状态与日程显示的过滤功能关联起来。我们期望实现以下功能： - 如果没有日期按钮处于活动状态，则显示所有日期。 - 如果有任何日期按钮处于活动状态，则仅显示对应活动按钮的日期。 - “Show All”按钮将所有按钮恢复到非活动状态，使所有日期可见。 ##### 3.2 实现步骤 这个功能比之前的 Stimulus 示例稍复杂，因为一个项目是否显示不仅取决于该项目本身的状态，还取决于整个组的状态，而且按钮影响的是页面中其自身 DOM 子树之外的部分。以下是实现该功能的步骤： 1. **修改 HTML 文件**：在日程显示页面的日历头部代码周围添加相关 HTML 代码。 ```erb <div class="grid grid-cols-7 gap-0 mb-6" data-controller="calendar"> <% @schedule.schedule_days.each do |schedule_day| %> <% date_string = schedule_day.day.by_example("2006-01-02") %> <div class="text-center border-b-2 border-transparent" id="calendar-day-<%= schedule_day.day_string %>" data-controller="css" data-css-css-class="border-red-700" data-css-status-value="false" data-css-target="elementToChange" data-calendar-target="calendarDay" data-schedule-id="day-body-<%= schedule_day.day_string %>" data-action="click->css#toggle click->calendar#filter"> <%= schedule_day.day.by_example("Jan 2") %> </div> <% end %> <div data-action="click->calendar#showAll"> Show All </div> </div> ``` 2. **添加 DOM ID 到日程显示部分**：在 `app/views/schedule_days/_schedule_day.html.erb` 文件中添加预期的 DOM ID。 ```erb <section id="day-body-<%= schedule_day.day_string %> data-controller="css" data-css-css-class="hidden" data-css-status-value="false"> ``` 3. **编写 Stimulus 控制器**：创建 `CalendarController` 来连接各个部分。 ```typescript import { Controller } from "stimulus" export default class CalendarController extends Controller { static targets = ["calendarDay"] calendarDayTargets: HTMLElement[] everyDayUnselected(): boolean { return this.calendarDayTargets.every((target: HTMLElement) => { return target.dataset.cssStatusValue === "false" }) } filter(): void { const everyDayUnselected = this.everyDayUnselected() this.calendarDayTargets.forEach((target: HTMLElement) => { const show = everyDayUnselected || target.dataset.cssStatusValue === "true" ```