✖️Dynamic variable

Dynamic variables in QuickDEV are a powerful feature utilized for managing intricate variables that dynamically update the state of components within your application. These variables function as intermediary or transient storage for data that can change over time due to user interactions or other processes.

In QuickDEV, dynamic variables prove particularly valuable when handling scenarios where a component's state requires updating based on user input or other dynamic conditions. By binding these variables to components using Handlebars syntax, you can craft highly interactive and responsive user interfaces.

Here's a concise overview of how dynamic variables function in QuickDEV:

1. Definition and Initialization: Dynamic variables within QuickDEV are established within the QuickDEV environment. They commence with a default value, which can be a basic data type such as a string or number, or more intricate objects and arrays.

2. Binding to Components: These variables are connected to UI components through Handlebars syntax. For instance, {{variable1}} links the value of variable1 to a component. This linkage ensures that any modifications to the dynamic variable are promptly mirrored in the component.

3. Dynamic Updates: User interactions with the application, such as clicking a button, entering text, or selecting an option from a dropdown, can trigger updates to these dynamic variables. These updates can range from straightforward adjustments to text values to more intricate modifications involving array or object structures.

4. Reactivity: The primary advantage of dynamic variables lies in their reactivity. When a dynamic variable undergoes a change, all components linked to that variable automatically adjust to reflect the updated value. This reactive behavior is essential for crafting dynamic and seamless user experiences.

5. Use Cases: Dynamic variables find widespread application in various scenarios, including form input management, toggling the visibility of UI elements, temporary storage of user selections, and control over the state of interactive elements like accordions, tabs, and modals.

6. Lifecycle: In QuickDEV, dynamic variables are typically short-lived. They exists for the duration of a specific task or user interaction and do not persist across different sessions or page reloads, unlike more permanent state management solutions.

Create a dynamic variable

Click + New and select Dynamic variable in query editor.

You can rename the dynamic variable and set an initial value.

Set dynamic variable values

Dynamic variables provide setValue() and setIn() methods for setting or altering their values, which can be invoked within JavaScript queries.

Use setValue() to change the value directly.

//variable1.setValue(value: any)
variable1.setValue(3)
variable1.setValue(input1.value)

When the initial value of a dynamic variable is an object, use setIn() to modify the value at a specified path.

// initial value of variable2 as follows：
{
    girl: {
        name: "Luca",
        age: 15,
        city: {
            name: "Paris"
        }
     }
     boy: {
         name: "Bob",
         age: 24,
         city: {
             name: "Berlin"
         }
     }
}
//To change the value in a specified path
//variable.setIn(path, any value)
//path: an array of keys or indexes. Only the last item in the path will be changed.
variable2.setIn(['girl','city'],{name:'Seatle'})
variable2.setIn(['boy','age'],18)


// To set value array value, you can use 
// init value = ["hello", "world"]
variable2.setIn([1],"foo") // this will result to ["hello", "foo"]

These two methods can also be invoked within event handlers. Choose "Set a Dynamic Variable value" as the action and select "Method on demand."