绑定会用一个读取实时数据的表达式替换固定值。文本、链接、图片、属性、可见性和样式值都可以绑定。数据变化时,只有页面中被绑定的部分会更新。
绑定一个值
在检查器中,把鼠标悬停在字段上并点击它的 bind 按钮。输入表达式;自动补全会根据当前作用域推荐变量、查询字段、条目字段和函数,预览会用实时数据显示结果。移除绑定即可恢复为固定值。
表达式
表达式使用 JavaScript 语法的一个安全子集:字面量、模板字符串、支持展开运算的数组和对象、使用 ?. 的属性访问、算术运算、比较运算、&&、||、??、三元运算符、方法调用,以及作为参数的单行箭头函数。
js
// Text
item.title.toUpperCase()
fn.formatCurrency(item.price, 'EUR', 'de-DE')
`${fn.length(queries.cart.data)} items`
// Visibility (hide when this is true)
!user.isLoggedIn
// Style
item.stock > 0 ? 'var(--color-fg)' : 'var(--color-muted)'
// Lists
queries.products.data.filter(p => p.featured).slice(0, 3)
fn.sortBy(queries.posts.data, 'date', 'desc')
可以读取的内容
vars页面变量和站点变量。同名时,页面变量会遮蔽站点变量。
queries每个查询都是 { data, loading, error, updatedAt }。
item, index, parent在集合列表和模板页面中:当前条目及其位置。
user访客:{ isLoggedIn, id, email, name, emailVerified, roles, meta }。
page路由:路径、参数(例如 :slug)和查询字符串。
site站点名称和语言区域。
fn内置函数和你自己的公式:fn.formatDate(…)、fn.myFormula(…)。
steps, input, event, error在工作流中:之前步骤的结果、输入、触发事件以及捕获的错误。
输入框的双向绑定
表单控件可以通过 $model 进行双向绑定:输入内容会更新变量,修改变量也会更新输入框。它适合用于搜索框和筛选器,再在查询的输入中读取该变量,这样访客输入时结果就会重新获取。
json
"text": { "$expr": "item.title" },
"hidden": { "$expr": "!user.isLoggedIn" },
"value": { "$model": "vars.search" }
公式
公式是你自己定义的可复用函数,在 Data 工作区中定义,包含参数和一个表达式主体,可在任何地方以 fn.name(…) 调用。所有内置函数请参见表达式参考。
发送给访客的内容
没有绑定的页面完全不发送 JavaScript。被绑定的部分会成为小型的孤岛(islands):HTML 在服务器上渲染,一个轻量运行时只在浏览器中更新被绑定的值。绑定的样式会编译为按元素设置的 CSS 变量。