跳到正文
本页内容

核心脉搏:数据绑定 (Data Binding)

如何通过分离数据与结构来让您的 UI "活"起来。深入浅出 JSON Pointer 和响应式存储。

更新: 2026/8/24 审校: HIA2UI 编辑组 v0.9.1

核心概念:A2UI 不仅仅是一个静态图片生成器。它构建的是 活的应用 (Live Applications)。 为了做到这一点,它将 骨架 (Structure)血液 (Data) 彻底分离。

为什么要分离数据与布局?

想象一个“股票行情追踪”组件。

  • 静态方式:LLM 每秒钟重新生成整个价格表格。(昂贵、缓慢、闪烁)。
  • A2UI 方式:LLM 只发送一次表格结构。然后,它发送微小的 数据更新 (price: 105.20)。UI 会瞬间平滑更新。

工作原理:JSON Pointers

把您的数据想象成一个文件系统树。每一条数据都有一个“地址”。

数据模型 (The Store)

{
  "user": { "name": "Alice" },
  "cart": { "total": 99.00 }
}

组件 (The View)

组件不硬编码 “Alice”,而是指向地址 /user/name

{"id":"user-name","component":"Text","text":{"path":"/user/name"}}

当 Agent 发送 updateDataModel/user/name 改为 “Bob” 时,渲染器会更新绑定文本。

动态列表 (Loops)

想要渲染一个列表吗?使用 模板 (Template)。 它的工作方式类似于编程中的 map() 函数。

  1. 数据: items: [ {name: "苹果"}, {name: "香蕉"} ]
  2. 模板: “对于 /items 中的每一项,渲染一个绑定到 /name 的卡片。“

双向绑定 (Forms)

数据绑定不仅仅是为了读取,也是为了写入。 当用户在 <TextField binding="/search/query" /> 中输入时:

  1. 数据存储中的值更新为 “Pizza”。
  2. 除非 Surface 启用数据模型同步,或某个 Action 发送绑定值,否则变化只保留在本地。
  3. Agent 随后可以决定是否获取结果。