数据绑定

JSON Schema 使用 语法实现数据绑定，支持表达式计算和全局状态访问。

基本语法

简单绑定

{
  "data": { "name": "张三" },
  "com": "NText",
  "children": "{{ name }}"
}

属性绑定

{
  "data": { "disabled": true },
  "com": "NButton",
  "props": {
    "disabled": "{{ disabled }}"
  }
}

样式绑定

{
  "data": { "color": "red" },
  "com": "div",
  "style": {
    "color": "{{ color }}"
  }
}

表达式

算术运算

{
  "data": { "count": 5 },
  "com": "NText",
  "children": "总数：{{ count * 2 }}"
}

字符串拼接

{
  "data": { "firstName": "张", "lastName": "三" },
  "com": "NText",
  "children": "{{ firstName + lastName }}"
}

三元表达式

{
  "data": { "score": 85 },
  "com": "NTag",
  "props": {
    "type": "{{ score >= 60 ? 'success' : 'error' }}"
  },
  "children": "{{ score >= 60 ? '及格' : '不及格' }}"
}

逻辑运算

{
  "props": {
    "disabled": "{{ !username || !password }}",
    "show": "{{ isAdmin && hasPermission }}"
  }
}

比较运算

{
  "if": "count > 0",
  "children": "{{ count === 1 ? '1 项' : count + ' 项' }}"
}

对象和数组

访问对象属性

{
  "data": {
    "user": { "name": "张三", "age": 25 }
  },
  "com": "NText",
  "children": "{{ user.name }}，{{ user.age }} 岁"
}

访问数组元素

{
  "data": {
    "items": ["苹果", "香蕉", "橙子"]
  },
  "com": "NText",
  "children": "第一个：{{ items[0] }}"
}

数组方法

{
  "data": { "list": [1, 2, 3, 4, 5] },
  "com": "NText",
  "children": "总数：{{ list.length }}，总和：{{ list.reduce((a, b) => a + b, 0) }}"
}

双向绑定

model 语法

{
  "data": { "form": { "username": "" } },
  "com": "NInput",
  "model": "form.username"
}

自定义 model 属性

{
  "com": "NSwitch",
  "model:value": "form.enabled"
}

{
  "com": "NCheckbox",
  "model:checked": "form.agree"
}

{
  "com": "NSelect",
  "model:value": "form.status",
  "props": {
    "options": [
      { "label": "启用", "value": 1 },
      { "label": "禁用", "value": 0 }
    ]
  }
}

全局状态

DynamicPage 会注入全局状态，可直接使用：

$app - 应用状态

{
  "com": "NText",
  "children": "当前语言：{{ $app.locale }}"
}

{
  "com": "div",
  "if": "$app.isMobile",
  "children": "移动端内容"
}

$theme - 主题状态

{
  "com": "SvgIcon",
  "props": {
    "icon": "{{ $theme.darkMode ? 'mdi:weather-night' : 'mdi:weather-sunny' }}"
  }
}

{
  "style": {
    "color": "{{ $theme.themeColor }}"
  }
}

$user - 用户信息

{
  "com": "NText",
  "children": "欢迎，{{ $user.nickname }}"
}

{
  "com": "NAvatar",
  "props": {
    "src": "{{ $user.avatar }}"
  }
}

$permissions - 权限列表

{
  "com": "NButton",
  "if": "$permissions.includes('user:write')",
  "children": "编辑"
}

内置变量

$response

API 请求的响应数据：

{
  "fetch": "/api/user",
  "then": [
    { "set": "user", "value": "{{ $response }}" }
  ]
}

$args

事件参数：

{
  "events": {
    "click": { "set": "selectedId", "value": "{{ $args[0] }}" }
  }
}

$event

原生事件对象：

{
  "events": {
    "input": { "set": "value", "value": "{{ $event.target.value }}" }
  }
}

row / item / index

循环渲染中的变量：

{
  "for": "item in list",
  "children": "{{ index + 1 }}. {{ item.name }}"
}

方法调用

内置方法

{
  "children": "{{ JSON.stringify(form) }}"
}

{
  "children": "{{ Math.round(score * 100) / 100 }}"
}

国际化

{
  "children": "{{ $t('common.submit') }}"
}

{
  "children": "{{ $t('message.total', { count: list.length }) }}"
}

注意事项

1. 避免复杂表达式

// ❌ 不推荐
{
  "children": "{{ list.filter(i => i.status === 1).map(i => i.name).join(', ') }}"
}

// ✅ 推荐：在 methods 中处理
{
  "methods": {
    "getActiveNames": "{{ list.filter(i => i.status === 1).map(i => i.name).join(', ') }}"
  },
  "children": "{{ getActiveNames() }}"
}

2. 空值处理

{
  "children": "{{ user?.name || '未知' }}"
}

3. 类型转换

{
  "props": {
    "value": "{{ Number(inputValue) }}",
    "label": "{{ String(count) }}"
  }
}