# Data Binding SUI provides built-in variables and functions for accessing request data and executing server-side logic. ## Built-in Variables ### Request Variables | Variable | Description | Example | | ---------- | -------------------- | ----------------------- | | `$payload` | POST request body | `{{ $payload.name }}` | | `$query` | URL query parameters | `{{ $query.search }}` | | `$param` | Route parameters | `{{ $param.id }}` | | `$cookie` | Request cookies | `{{ $cookie.session }}` | ### URL Variables | Variable | Description | Example Value | | ------------- | ----------- | --------------------------- | | `$url.path` | URL path | `/users/123` | | `$url.host` | Full host | `example.com:8080` | | `$url.domain` | Domain only | `example.com` | | `$url.scheme` | Protocol | `https` | | `$url.url` | Full URL | `https://example.com/users` | ### Context Variables | Variable | Description | Example Value | | ------------ | ------------------------------ | -------------------- | | `$theme` | Current theme | `light`, `dark` | | `$locale` | Current locale | `en-us`, `zh-cn` | | `$timezone` | System timezone | `Asia/Shanghai` | | `$direction` | Text direction | `ltr`, `rtl` | | `$global` | Global data from `__data.json` | `{ title: "App" }` | | `$auth` | OAuth authorized info (if guard is `oauth`) | `{ user_id: "123" }` | ## Usage Examples ### Query Parameters URL: `/search?q=hello&page=2` ```html

Search: {{ $query.q }}

Page: {{ $query.page ?? 1 }}

``` ### Route Parameters Route: `/users/[id]/posts/[postId]` URL: `/users/123/posts/456` ```html

User {{ $param.id }}

Post {{ $param.postId }}

``` ### POST Payload ```html
{{ $payload.error }}
``` ### Theme and Locale ```html

{{ $global.title }}

``` ## Data Configuration (`.json`) Define page data using JSON configuration: ### Static Data ```json { "title": "My Page", "items": [ { "id": 1, "name": "Item 1" }, { "id": 2, "name": "Item 2" } ] } ``` ### Process Calls ```json { "$users": "models.user.Get", "$settings": { "process": "models.settings.Find", "args": [1] } } ``` Keys starting with `$` trigger process calls. The result is available as the variable name (without `$`). ### Using Request Variables ```json { "$user": { "process": "models.user.Find", "args": ["$param.id"] }, "searchQuery": "$query.q", "currentPath": "$url.path" } ``` Available request variables in JSON config: - `$query.` - Query parameters - `$param.` - Route parameters - `$payload.` - POST payload - `$header.` - Request headers - `$url.path` / `$url.host` / `$url.domain` / `$url.scheme` Note: `$header` is only available in JSON configuration, not in HTML templates. ### Complex Example ```json { "pageTitle": "User Profile", "userId": "$param.id", "$user": { "process": "models.user.Find", "args": ["$param.id"] }, "$posts": { "process": "models.post.Get", "args": [ { "wheres": [{ "column": "user_id", "value": "$param.id" }], "limit": 10 } ] }, "isOwner": "$query.edit == 'true'" } ``` ### Calling Backend Script Methods Use the `@MethodName` syntax to call functions defined in the page's `.backend.ts` file: ```json { "$record": "@GetRecord", "$items": { "process": "@GetItems", "args": ["active", 20] } } ``` **Important**: The Request object is automatically appended as the **last argument** to the backend function. **`page.backend.ts`**: ```typescript // Called from .json as: "$record": "@GetRecord" // Receives: (request) function GetRecord(request: Request): any { const id = request.params.id; // Access route params via request return Process("models.record.Find", id); } // Called from .json as: { "process": "@GetItems", "args": ["active", 20] } // Receives: ("active", 20, request) function GetItems(status: string, limit: number, request: Request): any[] { return Process("models.item.Get", { wheres: [{ column: "status", value: status }], limit: limit, }); } ``` > **⚠️ Common Mistake**: You cannot use `$param.id` directly in backend scripts. The `$param`, `$query`, etc. variables are only available in HTML templates and `.json` configurations. In backend scripts, access these values via the `request` parameter: `request.params.id`, `request.query.search`, etc. ## Built-in Functions ### P\_() - Process Call Call a Yao process directly in templates: ```html {{ P_('utils.formatDate', createdAt) }} {{ P_('utils.calculate', price, quantity, discount) }}
Admin Panel
``` ### True() / False() Check boolean values: ```html
User exists
No error
User exists
``` ### Empty() Check if array or object is empty: ```html
No items
{{ items.length }} items found
No settings configured
``` ## Global Data (`__data.json`) Define global data available to all pages: **`/templates/