# 数据星 ## 概述 Datastar 是一个轻量级前端框架，通过超媒体优先的方法实现后端驱动的交互式 UI。它使用标准 HTML `data-*` 属性将后端反应性（类似于 htmx）与前端反应性（例如 Alpine.js）结合起来。 ## 何时使用此技能在以下情况下使用此技能： * 将前端交互性添加到服务器渲染的 HTML * 构建由后端状态驱动的响应式 UI * 在 Go 应用程序中使用 Datastar 和组件 * 使用服务器发送事件 (SSE) 进行实时更新 **先决条件：** 将 Datastar 与 Go 结合使用时，还要使用 HTML 组件模式的 **gomponents** 技能。 ## 安装 ### 浏览器（CDN） ### Go（组件-数据星）去获取 maragu.dev/gomponents-datastar ** ** # 第 1 部分：Datastar 基础知识 ## 核心概念 ### 信号信号是反应状态容器。当信号的值发生变化时，所有相关表达式都会自动更新。

* 信号名称在表达式中以“$”为前缀 * 将信号设置为“null”或“undefined”可将其删除 * 对嵌套信号使用点符号：`$user.name` ### DOM 修补 Datastar 使用变形来仅更新已更改的 DOM 部分，同时保留状态。后端发送修补到现有页面的 HTML 片段。 ## 属性参考 ### 状态管理 **数据信号** \- 初始化反应信号：

**数据计算** \- 创建派生只读信号：

**data-init** \- 元素加载时运行表达式：

### 数据绑定 **data-text** \- 将文本内容绑定到表达式： **data-bind** \- 表单元素的双向绑定： <输入数据绑定=“$名称”类型=“文本”> **data-show** \- 有条件地显示/隐藏元素：

仅在 true 时显示

### 造型 **data-class** \- 有条件地应用 CSS 类：

**data-style** \- 动态设置内联样式：

**data-attr** \- 动态设置 HTML 属性： ### 活动 **data-on** \- 附加事件侦听器： <输入数据：输入=“$搜索= evt.target.value”>

`evt` 变量引用事件对象。 **data-on-intersect** \- 当元素进入视口时触发：

正在加载...

**data-on-interval** \- 定期运行：

计时器：

**data-on-signal-patch** \- 当信号更新时执行：

### DOM 控制 **data-ref** \- 创建引用 DOM 元素的信号： <输入数据-ref =“$ inputEl”类型=“文本”> **数据忽略** \- 从 Datastar 处理中排除元素：

此处为第三方小部件

**data-ignore-morph** \- 保持 Datastar 处于活动状态但跳过变形：

保留此 DOM 结构

**data-preserve-attr** \- 在变形过程中保留属性： ### 后端操作 **@get()、@post()、@put()、@patch()、@delete()** \- 向后端发送请求： ## 修饰符修饰符使用双下划线语法扩展属性行为： ### 时序修改器 * `__debounce` / `__debounce_500ms` \- 去抖执行 * `__throttle` / `__throttle_1s` \- 限制执行 * `__delay` / `__delay_200ms` \- Delay execution ### 事件修饰符 * `__prevent` \- Call `preventDefault()` * `__stop` \- 调用 `stopPropagation()` * `__capture` \- Use capture phase * `__passive` \- 标记为被动监听者 * `__once` \- 只执行一次 * `__self` \- 仅当目标是元素本身时触发 * `__outside` \- 当事件发生在元素外部时触发 * `__window` \- 将侦听器附加到窗口 ### Example with Modifiers <输入数据：input__debounce_300ms =“@get('/search?q=' + $query)"> ## 服务器发送的事件 (SSE) Datastar 使用 SSE 进行流式响应。后端发送具有“text/event-stream”内容类型的事件。 ### 上交所事件类型 **datastar-patch-elements** \- 将 HTML 修补到 DOM 中： event: datastar-patch-elements 数据：元素

更新内容

**datastar-patch-signals** \- 更新信号值：事件：datastar-patch-signals data: signals {count: 42} **datastar-remove-elements** \- 通过选择器删除元素：事件：datastar-remove-elements 数据：选择器#old-element ** ** # Part 2: gomponents-datastar ## 概述 gomponents-datastar 提供了生成 Datastar 属性作为 gomponents 节点的 Go 函数。它与组件库无缝集成。 ## 进口公约 Use dot imports for a clean DSL: 导入（。 “maragu.dev/gomponents” 。 "maragu.dev/gomponents/html" 数据“maragu.dev/gomponents-datastar” ）注意：建议为 datastar 使用 `data` 别名。 For up-to-date API documentation, run: go doc maragu.dev/gomponents-datastar ## 函数参考 ### 状态管理 **信号** \- 初始化反应信号： data.Signals(map[string]any{ “计数”：0， “名称”：“世界”， }) **计算** \- 创建计算信号（键值对）： data.Computed("doubled", "$count * 2") **Init** \- Run expression on load: data.Init("console.log('Component loaded')") ### 数据绑定 **Text** \- Bind text content: Span(data.Text("'你好，' + $name")) **Bind** \- Two-way form binding: Input(Type("text"), data.Bind("$name")) **Show** \- Conditional visibility: Div(data.Show("$isVisible"), Text("可见时显示")) ### 造型 **类** \- 条件类（键值对）： data.Class("active", "$isActive", "error", "$hasError") **样式** \- 动态内联样式（键值对）： data.Style("颜色", "$textColor", "不透明度", "$不透明度") **Attr** \- 动态属性（键值对）： data.Attr("已禁用", "$isLoading", "aria-busy", "$isLoading") ### 活动 **On** \- Attach event listeners: data.On("click", "$count++") data.On("点击", "@post('/提交')", data.ModifierPrevent) data.On("输入", "$search = evt.target.value", data.ModifierDebounce) **OnIntersect** \- Viewport intersection: data.OnIntersect("@get('/load-more')") **OnInterval** \- Periodic execution: data.OnInterval("$elapsed++") **OnSignalPatch** \- 对信号变化做出反应： data.OnSignalPatch("console.log('更新')") ### DOM 控制 **参考** \- 参考 DOM 元素：数据.Ref("$inputEl") **忽略** \- 跳过 Datastar 处理：数据.忽略() **IgnoreMorph** \- 仅跳过变形： data.IgnoreMorph() **PreserveAttr** \- 在变形过程中保留属性： data.PreserveAttr("值", "选中") ### 请求帮助 **指示器** \- 显示加载状态：数据.Indicator("$isLoading") **JSONSignals** \- 控制发送哪些信号： data.JSONSignals(data.Filter{包含: "form.*"}) data.JSONSignals(data.Filter{排除：“内部。*”}) ## 修饰符将修饰常量与事件函数一起使用： // 计时 data.ModifierDebounce // __debounce data.ModifierThrottle // __throttle data.ModifierDelay // __delay // 事件行为 data.ModifierPrevent // __prevent data.ModifierStop // __stop data.ModifierCapture // __capture data.ModifierPassive // __passive data.ModifierOnce // __once data.ModifierSelf // __self data.ModifierOutside // __outside data.ModifierWindow // __window // 持续时间/阈值助手 data.Duration(500 * time.Millisecond) // __500ms 数据.阈值(0.5) // __threshold_0.5 ## 完整示例包视图导入（ “网络/http” 。 “maragu.dev/gomponents” 。 “maragu.dev/gomponents/html” ghttp“maragu.dev/gomponents/http” ds“maragu.dev/gomponents-datastar” ） func CounterPage() 节点 { 返回 HTML5(HTML5Props{ 标题：“柜台”，语言：“en”，头：[]节点{ 脚本（类型（“模块”）， Src("https://cdn.jsdelivr.net/gh/starfederation/[电子邮件受保护]/bundles/datastar.js"), ), }, 主体：[]节点{ 分区（ data.Signals(map[string]any{"count": 0}), H1(data.Text("'计数：' + $count")), 按钮（ data.On("点击", "$count++"), 文本（“增量”）， ), 按钮（ data.On("点击", "$count--"), 文本（“减量”）， ), 按钮（ data.On("点击", "@post('/api/save')"), Text("保存到服务器"), ), ), }, }) } fun SearchForm() 节点 { 返回表格（ data.Signals(map[string]any{"query": "", "results": []any{}}), data.On("提交", "@get('/search?q=' + $query)", data.ModifierPrevent), 输入（类型（“文本”），数据.Bind("$query"), data.On("input", "@get('/search?q=' + $query)", data.ModifierDebounce, data.Duration(300*time.Millisecond)), 占位符（“搜索...”）， ), 分区（ ID(“结果”), data.Show("$results.length > 0"), data.Text("'找到' + $results.length + '结果'"), ), ） } ## SSE 处理程序模式 func handleSSE(w http.ResponseWriter, r *http.Request) { w.Header().Set("Content-Type", "text/event-stream") w.Header().Set("缓存控制", "无缓存") w.Header().Set("连接", "保持活动") 冲洗器，好的 := w.(http.Flusher) 如果！好的{ http.Error(w, "不支持 SSE", http.StatusInternalServerError) 返回 } // 修补 HTML 元素 fmt.Fprintf(w, "事件: datastar-patch-elements\n") fmt.Fprintf(w, "数据: 元素

已更新！

\n\n") 冲洗器.Flush() // 更新信号 fmt.Fprintf(w, "事件: datastar-patch-signals\n") fmt.Fprintf(w, "数据: 信号 {\"count\": 42}\n\n") 冲洗器.Flush() } ## 提示 1. **信号命名：** 在表达式中使用`$`前缀，而不是在Go代码中 2. **避免冲突：** 使用 `data.Text()` 进行 Datastar 文本绑定，使用 `Text()` 组件进行静态内容 3. **修饰符：** 链接多个修饰符： `data.On("click", "...", data.ModifierPrevent, data.ModifierOnce)` 4. **SSE ID：** 通过 SSE 修补的元素需要匹配“id”属性 5. **Morphing：** Datastar 默认在 DOM 更新期间保留表单输入状态

数据星

包含技能