ts-target

Assigns a target element for the request issued by origin element. Could be some parent element, or a sibling, or a complete separate part of the page.

ts-target accepts CSS selector (with possible modifiers) or a keywords target or inherit:

• ts-target="target"
• ts-target="inherit"
• ts-target="#id .class"
• ts-target="parent div"

Notes

• inherit means search DOM tree upwards until you see other ts-target attribute
• target means current element (where attribute is defined). Particularly useful with inherit: you can put ts-target="target" somewhere and then all children ts-target="inherit" will point at the target element.
• CSS selector with no modifiers means “search from document root”
• parent modifier searches upwards from the current element for a matching element
• child modifier searches downwards from the current element for a matching element
• sibling modifier searches downwards from the parent element for a matching element

Examples

Targeting Other Elements #

Default behavior is to replace element, which issues the request (in this case an a). ts-target sets another element as a target for the request.

Targeting Parents #

This is very common pattern - when a button needs to update an element around itself. Modifier parent will search upwards for a suitable element (using element.closest(sel)).

Relative Targeting (advanced)#

Most twinspark commands and extensions operate directly on the current target element. However, some of them might require a pair of elements (e.g. a command that copies data from one input to another). This means supplying a TwinSpark selector as an argument. To point directly to the current target element, use the target keyword.

Another useful target is the element that created the event. The simplest way to access it is to create a twinspark extension that sets target to event.target: