i-model

Olova includes a powerful directive called i-model, which allows two-way data binding between your JavaScript data and input elements. This means any changes made in the input field are instantly reflected in the data model, and vice versa.

Let’s break down how i-model works using the example:

Example: Two-Way Data Binding

This example binds an input field to a text property, and any changes to the input are reflected in real-time.

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    text: "Hello, Olova!",
  },
  template: `
    <h1>{ text }</h1>
    <input i-model="text" />
  `,
});

app.mount("#root");

Hello, Olova!

Explanation:

As you type into the input, the value of { text } updates and is reflected in the heading.

Number Input with Two-Way Binding

Number Input with Two-Way Binding In this example, the i-model directive binds to a number input, updating the count value dynamically.

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    count: 0,
  },
  template: `
    <h1>Current Count: { count }</h1>
    <input i-model="count" type="number" />
  `,
});

app.mount("#root");

Current Count: 0

Checkbox Binding

Let’s bind a checkbox to a checked property to track whether it’s checked or not.

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    checked: false,
  },
  template: `
    <label>
      <input i-model="checked" type="checkbox" />
      Check me!
    </label>
    <p>Checked: { checked ? 'Yes' : 'No' }</p>
  `,
});

app.mount("#root");

Explanation: The checkbox is bound to the checked property. When you check or uncheck the box, it updates the checked property and reflects the change in the paragraph (Yes or No).

Check me!

Checked: No

Radio Button Group Binding

Here’s how to use i-model with radio buttons to bind a value based on the user’s selection.

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    selectedOption: "A",
  },
  template: `
    <label>
      <input i-model="selectedOption" type="radio" value="A" />
      Option A
    </label>
    <label>
      <input i-model="selectedOption" type="radio" value="B" />
      Option B
    </label>
    <label>
      <input i-model="selectedOption" type="radio" value="C" />
      Option C
    </label>
    <p>Selected: { selectedOption }</p>
  `,
});

app.mount("#root");

Explanation:

Three radio buttons are linked to the selectedOption property. When one is selected, the value of selectedOption changes accordingly and is displayed in the paragraph.

Option A Option B Option C

Selected: A

Toggle Visibility with Checkbox

In this example, we use a checkbox to toggle the visibility of a paragraph.

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    isVisible: true,
  },
  template: `
    <label>
      <input i-model="isVisible" type="checkbox" />
      Toggle visibility
    </label>
    <p i-if="isVisible">This paragraph is visible!</p>
  `,
});

app.mount("#root");

Explanation:

The isVisible property is toggled by the checkbox. When it’s checked, the paragraph is visible. When unchecked, the paragraph disappears.

Toggle visibility

This paragraph is visible!

Select Dropdown Binding

This example shows how to bind a select dropdown to a selected property.

import { createApp } from "//unpkg.com/olova";

const app = createApp({
  data: {
    selected: "apple",
  },
  template: `
    <select i-model="selected">
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="cherry">Cherry</option>
    </select>
    <p>Selected: { selected }</p>
  `,
});

app.mount("#root");

Explanation:

The dropdown is bound to the selected property. When you change the selection, the selected property updates, and the selected option is displayed.

AppleBanana Cherry

Selected: Apple

Conclusion

The i-model directive in Olova is a versatile tool that simplifies two-way data binding between your data model and input elements. Whether you're dealing with text, numbers, checkboxes, radio buttons, or selects, i-model makes it easy to keep your UI and data in sync!