Event Handling

JSON Schema configures event handling through events, supporting multiple action types.

Basic Syntax

{
  "com": "NButton",
  "events": {
    "click": { "actionType": "parameters" }
  }
}

Action Types

set - Set Data

Set a single value:

{
  "events": {
    "click": { "set": "count", "value": "{{ count + 1 }}" }
  }
}

Set nested data:

{
  "events": {
    "click": { "set": "form.username", "value": "admin" }
  }
}

call - Call Method

Call a custom method:

{
  "methods": {
    "handleSubmit": [
      { "set": "loading", "value": true },
      { "fetch": "/api/submit" }
    ]
  },
  "events": {
    "click": { "call": "handleSubmit" }
  }
}

Call with arguments:

{
  "events": {
    "click": { "call": "deleteItem", "args": ["{{ row.id }}"] }
  }
}

Call global methods:

{
  "events": {
    "click": { "call": "$router.push", "args": ["/home"] }
  }
}

{
  "events": {
    "click": { "call": "$message.success", "args": ["Operation successful"] }
  }
}

fetch - Make Request

GET request:

{
  "events": {
    "click": {
      "fetch": "/api/users",
      "then": [
        { "set": "list", "value": "{{ $response }}" }
      ]
    }
  }
}

POST request:

{
  "events": {
    "click": {
      "fetch": "/api/user",
      "method": "POST",
      "body": "{{ form }}",
      "then": [
        { "call": "$message.success", "args": ["Saved successfully"] }
      ],
      "catch": [
        { "call": "$message.error", "args": ["Save failed"] }
      ]
    }
  }
}

script - Execute Script

{
  "events": {
    "click": {
      "script": "console.log('clicked'); state.count++;"
    }
  }
}

Access state and methods:

{
  "events": {
    "click": {
      "script": "if (state.form.username) { await $methods.submit(); } else { window.$message?.warning('Please enter username'); }"
    }
  }
}

emit - Emit Event

{
  "events": {
    "click": { "emit": "custom-event", "payload": "{{ selectedItem }}" }
  }
}

Multiple Actions

Use an array to execute multiple actions:

{
  "events": {
    "click": [
      { "set": "loading", "value": true },
      { "fetch": "/api/data" },
      { "set": "loading", "value": false },
      { "call": "$message.success", "args": ["Loading complete"] }
    ]
  }
}

Conditional Actions

if-then-else

{
  "events": {
    "click": {
      "if": "form.username && form.password",
      "then": { "call": "login" },
      "else": { "call": "$message.warning", "args": ["Please fill in all fields"] }
    }
  }
}

Nested conditions:

{
  "events": {
    "click": {
      "if": "!form.phone",
      "then": { "call": "$message.warning", "args": ["Please enter phone number"] },
      "else": {
        "if": "!/^1[3-9]\\d{9}$/.test(form.phone)",
        "then": { "call": "$message.warning", "args": ["Invalid phone number format"] },
        "else": { "call": "sendCode" }
      }
    }
  }
}

Common Events

Click Event

{
  "com": "NButton",
  "events": {
    "click": { "call": "handleClick" }
  }
}

Input Events

{
  "com": "NInput",
  "events": {
    "input": { "set": "searchText", "value": "{{ $args[0] }}" },
    "blur": { "call": "validate" },
    "focus": { "set": "focused", "value": true }
  }
}

Select Event

{
  "com": "NSelect",
  "events": {
    "update:value": { "set": "selectedValue", "value": "{{ $args[0] }}" }
  }
}

Form Event

{
  "com": "NForm",
  "events": {
    "submit": { "call": "handleSubmit" }
  }
}

Table Events

{
  "com": "NDataTable",
  "events": {
    "update:checked-row-keys": { "set": "selectedKeys", "value": "{{ $args[0] }}" },
    "update:page": { "call": "handlePageChange", "args": ["{{ $args[0] }}"] }
  }
}

Event Parameters

$args

Array of event callback arguments:

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

$event

Native DOM event object:

{
  "events": {
    "click": { "script": "console.log($event.target)" }
  }
}

row

Table row data (in table column rendering):

{
  "events": {
    "click": { "call": "editRow", "args": ["{{ row }}"] }
  }
}

Prevent Default Behavior

{
  "events": {
    "click": {
      "script": "$event.preventDefault(); $event.stopPropagation();"
    }
  }
}

Debounce and Throttle

Implement using script:

{
  "data": {
    "searchTimer": null
  },
  "events": {
    "input": {
      "script": "clearTimeout(state.searchTimer); state.searchTimer = setTimeout(() => { $methods.search(); }, 300);"
    }
  }
}

Example: Complete Form

{
  "data": {
    "form": { "username": "", "password": "" },
    "loading": false,
    "rules": {
      "username": [{ "required": true, "message": "Please enter username" }],
      "password": [{ "required": true, "message": "Please enter password" }]
    }
  },
  "methods": {
    "handleSubmit": [
      { "set": "loading", "value": true },
      {
        "fetch": "/api/login",
        "method": "POST",
        "body": "{{ form }}",
        "then": [
          { "call": "$message.success", "args": ["Login successful"] },
          { "call": "$router.push", "args": ["/home"] }
        ],
        "catch": [
          { "call": "$message.error", "args": ["Login failed"] }
        ],
        "finally": [
          { "set": "loading", "value": false }
        ]
      }
    ]
  },
  "com": "NForm",
  "props": { "model": "{{ form }}", "rules": "{{ rules }}" },
  "children": [
    {
      "com": "NFormItem",
      "props": { "path": "username", "label": "Username" },
      "children": [{ "com": "NInput", "model": "form.username" }]
    },
    {
      "com": "NFormItem",
      "props": { "path": "password", "label": "Password" },
      "children": [{ "com": "NInput", "model": "form.password", "props": { "type": "password" } }]
    },
    {
      "com": "NButton",
      "props": { "type": "primary", "loading": "{{ loading }}" },
      "events": { "click": { "call": "handleSubmit" } },
      "children": "Login"
    }
  ]
}