Skip to main content

Data Binding

Data binding is a technique that synchronizes the data between a component's logic and its view. This means that when data changes in the logic, the view is updated, and when the user changes some values in the view, the data in the logic is updated accordingly.

Attribute Binding

Here is an example of how to bind a property from the component's logic to an element's attribute:

Example.

import { useState } from '@monster-js/core';

export function App() {
const [id, setId] = useState(this, 0);
setInterval(() => setId(id() + 1), 1000);
return <h1 id={id()}>App component.</h1>
}

In the example above, the id attribute of the h1 element will increment every second. This is an example of one-way binding.

Text Binding

Here is an example of how to bind a state of a component to its view.

Example.

import { useState } from '@monster-js/core';

export function App() {
const [counter, setCounter] = useState(this, 0);
setInterval(() => setCounter(counter() + 1), 1000);
return <h1>{counter()}</h1>
}

In the example above, the counter will increment every second and display the changes as text in the view. This is another example of one-way binding.

Model Binding

Model binding is a two-way binding of data that uses the v:model directive. Whenever the model is changed in the view, the value in the logic will be updated, and the same thing will happen in the view when the model is updated from the logic.

Example.

import { useState } from '@monster-js/core';

export function App() {

const [message, setMessage] = useState(this, 'Hello world!');
const model = [message, setMessage];

return <div>
<h1>{getter()}</h1>
<input v:model={model} type="text" />
</div>
}

This is an example of two way binding. Please check the view model directive form more information about this directive.