Codex Chief Alpine.js 局部交互｜按引用键限定自定义事件
EnglishCodex 安装步骤
- 打开 GitHub 固定提交的 `.agents/skills/alpinejs-development/SKILL.md`，核对内容与使用条件。
- 在自己的项目中创建 `.agents/skills/alpinejs-development/`，把核对后的文件保存为 `.agents/skills/alpinejs-development/SKILL.md`。
- 在该项目根目录启动 Codex，输入 `$alpinejs-development` 并选择同名技能。
中文摘要
用 Alpine.js 管理 Chief 界面的轻量状态。把事件限定到当前组件，检查命名、载荷和监听范围。
SKILL.md 中文导读
可复现示例
为并排两个搜索面板规划打开事件。
{"panels":["left","right"],"event":"panel-open","target":"right","serverStateChanged":false}工作步骤
- 把小范围的界面状态放在各组件的 x-data。
- 在自定义事件中带上引用键并核对监听范围。
- 用最小用例验证事件只影响目标界面。
验收方法
事件带 `target=right`。右面板为 `open=true`，左面板保持 `open=false`，服务器状态继续由 Livewire 负责。
GitHub 原文 · 更新日期
适用环境
用 Codex 打开 Chief 项目，准备相关 Alpine 组件、事件名称和局部状态。服务器数据仍由 Livewire 或 PHP 负责。
常见问题
监听器收到不认识的引用键怎么办？
先验证事件载荷。引用键不属于当前组件时，不应触发本地状态变化。