Conditions

You can use any Appcelerator message as a condition. Here’s an example:

on="r:items.response then [action]"

In the example above, the action will be executed when the message r:items.request is received.

You can also look for specific values in the data payload of the message.

on="r:items.response[success=true] then [action]"

Then that action will only be executed if the message has a parameter success with the value true.

Other examples of parameters include

on="r:items.response[success!=false] then [action]"
on="r:items.response[success] then [action]"

Standard DOM Events

blur	Triggered when an element is blur-ed (i.e., loses focus). Usage: `on="blur then [action]"`
change	Triggered when an element's value changes Usage: `on="change then [action]"`
click	Triggered when an element is clicked either by a user or by the click action. Usage: `on="click then [action]"`
contextmenu	Triggered when an input elements receives a right click event Usage: `on="contextmenu then [action]"`
dblclick	Triggered when an element is double-clicked Usage: `on="dblclick then [action]"`
focus	Triggered when an element receives focus. Usage: `on="focus then [action]"`
mousedown	Triggered when an element receives a mousedown event Usage: `on="mousedown then [action]"`
mousemove	Triggered when an element receives a mousemove event Usage: `on="mousemove then [action]"`
mouseout	Triggered when an element receives a mouseout event Usage: `on="mouseout then [action]"`
mouseover	Triggered when an element receives a mouseover event Usage: `on="mouseover then [action]"`
mousewheel	Triggered when an mousewheel event is received Usage: `on="mousewheel then [action]"`

Key Events

These work just like the DOM key events provided by browsers, except that you can specify a keycode as part of the condition. For example you can use ‘esc’ or ‘enter’ or you can match for the exact keycode like ‘49’.

<input type="text" on="keyup[esc] then [action]"/>

You can also match for ctrl, alt, or shift combinations.

<input type="text" on="keyup[ctrl+shift+49] then [action]"/>

keyup	Triggered when an input elements receives a keyup event Usage: `on="keyup then [action]"` Optional Usage: `on="keyup[keycode] then [action]"`
keypress	Triggered when an input elements receives a keypress event Usage: `on="keypress then [action]"` Optional Usage: `on="keypress[keycode] then [action]"`
keydown	Triggered when an input elements receives a keydown event Usage: `on="keydown then [action]"` Optional Usage: `on="keydown[keycode] then [action]"`

History Event

The history event happens when there is a browser history event, triggered by an anchor (#) in the URL. This can be used to help support bookmarking capabilities within an RIA.

For example, http://localhost:3000/index.html#form will trigger a history event that can be used in a condition such as

on="history:form then [action]"

You may also catch all history events by using a wildcard

on="history:* then [action]"

In the wildcard case, to see what history state was triggered, you can use the this.data.state variable in your action.

iPhone Events

orientationchange

Triggered when an iPhone's orientation change is detected (this is an iPhone specific condition). To get the approximate (-90, 0, or 90) angle the phone is turned, you can access the "window.orientation" on the iPhone.

Usage: on="orientationchange then [action]"

Other Events

drag	Triggered when as draggable element is being dragged. Same as the onDrag event from Scriptaculous Draggable. The dragged element's id is in the payload of the action as this.data.id. Usage: `on="drag then [action]"`
dragend	Triggered when a draggable element has finished dragging. Same as the onEnd event from Scriptaculous Draggable. The dragged element's id is in the payload of the action as this.data.id. Usage: `on="dragend then [action]"`
dragover	Triggered when a draggable element is being dragged over an element that has its droppable attribute set to true. In the payload of the action, the dragged element's id is this.data.dragged and the droppable element's id is this.data.id. Usage: `on="dragover then [action]"`
dragstart	Triggered when a draggable element has started to drag. Same as the onStart event from Scriptaculous Draggable. The dragged element's id is in the payload of the action as this.data.id. Usage: `on="dragstart then [action]"`
drop	Triggered when a draggable element is being dropped over a droppable element. In the payload of the action, the dragged element's id is this.data.dropped and the droppable element's id is this.data.id. Usage: `on="drop then [action]"`
enter	Triggered on a form element when the user hits "enter" on any of the child input elements. Usage: `on="enter then [action]"`
resize	Triggered when an element whose "resizable" attribute is set to true is resized. Usage: `on="resize then [action]"`
selected	Triggered when an element whose parent's "selectable" attribute is set to true is selected. Usage: `on="selected then [action]"`
sortupdate	Triggered when a element whose "sortable" attribute is set to true has finished sorting. Same as the onUpdate event from Scriptaculous Sortable. The sortable element's id is in the payload of the action as this.data.id. Usage: `on="sortupdate then [action]"`
sortupdate	Triggered when a element whose "sortable" attribute is set to true has finished sorting. Same as the onUpdate event from Scriptaculous Sortable. The sortable element's id is in the payload of the action as this.data.id. Usage: `on="sortupdate then [action]"`
sortchange	Triggered when a element whose "sortable" attribute is set to true is beginning to change as an element is being dragged. Same as the onChange event from Scriptaculous Sortable. The effected element's id is in the payload of the action as this.data.id. Usage: `on="sortupdate then [action]"`