i-ref

The i-ref directive in Olova is a powerful way to reference DOM elements directly in your component. It works similarly to id attributes, but it’s designed to integrate seamlessly with Olova's reactivity system. Using i-ref, you can access DOM elements after they have been rendered, allowing you to perform dynamic actions on those elements, such as changing styles or adding event listeners.

How i-ref Works ?

• i-ref allows you to create a reference to any DOM element within your template.

• Once the component is rendered, you can access the referenced element using this.$refs in your methods.

• It is useful for directly manipulating the DOM, such as changing styles, modifying content, or focusing an input field.

Change Text Color with i-ref

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

const app = createApp({
  methods: {
    chnageColor() {
      // Access the referenced element and change its color
      this.$refs.chnageColor.style.color = "red";
    },
  },
  template: `
    <h1 i-ref="chnageColor">Hello world!</h1>
    <button @click="chnageColor">Change Color!</button>
  `,
});

app.mount("#root");

Hello world!

Explanation:

1. No data Property: Since there's no need for reactive state in this example, the data object has been removed.

2. Methods: chnageColor: This method is still used to change the color of the text by referencing the element using this.$refs.chnageColor.

3. Template:

The i-ref directive in <h1> assigns a reference to the heading, allowing you to manipulate it when the button is clicked.

Key Features of i-ref:

1. Direct Access to DOM Elements:

The i-ref directive is similar to using an id, but it integrates better with Olova's reactivity system. It lets you interact with the element after rendering by referring to this.$refs.

2. Ideal for Manipulating the DOM:

Use i-ref for cases where you need to change the DOM element directly, such as changing styles, focusing an input, or scrolling to a specific section.

3. Dynamic Updates:

You can modify any property of the referenced element (e.g., style, class, textContent, innerHTML) dynamically in your methods.

Practical Example:

Focus Input with i-ref

Here’s a practical example of using i-ref to focus an input field when a button is clicked:

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

const app = createApp({
  methods: {
    focusInput() {
      this.$refs.myInput.focus();
    },
  },
  template: `
    <input i-ref="myInput" placeholder="Click the button to focus here" />
    <button @click="focusInput">Focus Input</button>
  `,
});

app.mount("#root");

In this example:

• The input field has an i-ref="myInput" directive, allowing us to reference it with this.$refs.myInput.

• The focusInput method is triggered when the button is clicked, which focuses on the input field.

Conclusion:

The i-ref directive in Olova provides a powerful way to reference and manipulate DOM elements within your component. Whether you're changing styles, focusing inputs, or interacting with any other DOM element, i-ref gives you the flexibility and control you need. It works much like the id attribute but is more integrated into Olova's system, making it a handy tool for dynamic UI interactions.