ts-data

This is probably the most “magic” attribute, as it’s the only one “inherited” during a request. When request happens, TwinSpark will collect data from the origin element. This means element’s value, if it’s an input, select or a textarea, or form’s data if it’s a form.

But before that the whole hierarchy is checked for ts-data attributes which are then merged in a FormData. This is useful in cases when passing all the data through components or templates is inconvenient.

Syntax is either query string or JSON (check if the first symbol is a {). Multiple elements with the same key are supported (just like normal form data). You can override that by specifying key with null or empty data - this removes key from underlying FormData completely.

Examples

Collecting Data #

Here parent span declares ts-data with three keys (a, b, c) and then child a adds another entry with key b, drops existing c value and adds another (so it overrides c value). And then sends a POST request to a backend. Click link to see what data was sent.

Form With Data #

Form can be a bit tricky to collect data correctly, particularly weird thing is when you have a few submit buttons. The following form has:

• a text input
• a hidden input
• additional data in ts-data attribute
• two submit buttons

When you click one of the buttons, you can observe that only that button was included in the data &emdash; which is what you need to decide which action to take.

Batching (advanced)#

Here all spans trigger request on visible, so click "Reset" to see more requests. See sources and debug panel to see how requests are combined in a single one.