Actions

Introduction

Passing Action Parameters

Event Modifiers

Keydown Modifiers

---

Introduction

Actions in ASYNergy are used to easily listen to page interactions and call a handler of your revIgniter controller (re-rendering the affected HTML segment).

Here's the basic usage. The HTML:

<button asyn:click="resetName">Reset Name</button>

The revIgniter handler:

command resetName
  -- do something
end resetName

Here are some common events you may need to listen for:

Event	Directive
click	asyn:click
keydown	asyn:keydown
submit	asyn:submit

Following are a few examples of each in HTML:

<button asyn:click="doSomething">Do Something</button>

<input asyn:keydown.enter="doSomething">

<form asyn:submit.prevent="signup">

    ...

    <button>Register</button>
</form>

Like the above example using asyn:submit.prevent directly at the form opening tag prevents all form values from being sent to a form-handler as specified by the form's action attribute, if there is any. Instead, clicking the "Register" button would call the signup handler of your revIgniter controller.

Passing Action Parameters

You can pass extra parameters into an ASYNergy action directly in the expression like so:

<button asyn:click="resetName('Jane','John')">Reset Name</button>

In revIgniter, these parameters can be accessed using the rigAsynParams() function, which returns an array like:

put rigAsynParams() into tParamsA

Event Modifiers

Like you saw in the keydown example, ASYNergy directives sometimes offer "modifiers" to add extra functionality to an event. Below are the available modifiers that can be used with any event.

Modifier	Description
prevent	Equivalent of event.preventDefault()
debounce.150ms	Adds an Xms debounce to the handling of the action.

Keydown Modifiers

To listen for specific keys on keydown events, you can pass the name of the key as a modifier. You can directly use any valid key names exposed via KeyboardEvent.key as modifiers by converting them to kebab-case.

Following is a list of some common keys you may need:

Native Browser Event	ASYNergy Modifier
Backspace	backspace
Escape	escape
Tab	tab
ArrowRight	arrow-right

<input asyn:keydown.page-down="foo">

In the above example, the handler foo will only be called if event.key is equal to 'PageDown'.