State

State management is the most basic feature of Sidewind and most features rely on it. At the simplest level, you can use it to define simple UIs that derive values from the user input.

x-state is a state container and the state is often used by other directives. x is used for binding values. Consider the example below:

The state can be manipulated using a global setState:

x supports promises. This is useful for complex evaluations:

State can be a complex object:

The calculator example takes this idea further and shows how to handle user interaction.

Evaluators have access to the window and document objects:

Sometimes it makes sense to hide entire fragments of a HTML structure. That’s where x-if comes in:

x-cloak has been designed let you hide interactive content until Sidewind has loaded to avoid displaying markup that’s not ready. Consider the example below:

When it executes, it removes the hidden attribute from the element and it will be ready to run.