html directive

@html

• Dynamic HTML Rendering: Unlike regular interpolation which escapes HTML, {@html} allows you to render HTML content directly.

• Reactive Updates: The content updates automatically when the referenced data changes.

• Directive Processing: Any Olova directives in the rendered HTML are properly processed and made reactive.

const app = createApp({
  data: {
    content: "<strong>Hello</strong> <em>World!</em>",
    dynamicList: "<ul><li>Item 1</li><li>Item 2</li></ul>",
  },
});

<!-- Regular interpolation (escapes HTML) -->
<div>{content}</div>
<!-- Output: <strong>Hello</strong> <em>World!</em> -->

<!-- @html interpolation (renders HTML) -->
<div>{@html content}</div>
<!-- Output: Hello World! (with proper HTML formatting) -->

<!-- Works with dynamic content -->
<div>{@html dynamicList}</div>
<!-- Renders an actual unordered list -->

i-html

Overview

In this example, we are using the i-html directive in Olova.js to dynamically bind raw HTML content to an element. This is useful when you want to inject HTML content directly into your page and automatically reflect changes to reactive variables, such as {count}.

The example demonstrates how to bind HTML content with the current value of a reactive variable (count) and render it inside a div.

Example Code

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

const app = createApp({
  data: {
    count: 0, // Reactive variable to track count
    showHtml: `<h1>{count}</h1>`, // HTML content with dynamic placeholder
  },
  template: `
    <div i-html="showHtml"></div>
  `,
});

app.mount("#root");

0

## Breakdown

data

1. The data object holds the application's reactive state:

• count: A reactive property initialized to 0. It tracks the current count.
• showHtml: A string representing the raw HTML content. The placeholder {count} is automatically replaced with the current value of count.

i-html Directive

• i-html is a custom directive that binds raw HTML to an element. Unlike a regular text binding, this directive allows you to inject and render HTML into the DOM.

template

• The template uses the i-html directive to bind the showHtml data property to the div element. The {count} placeholder inside showHtml is dynamically replaced with the current value of count, and it is re-rendered whenever count changes.

Key Features

• Dynamic HTML Injection: Using i-html, you can inject and bind HTML content directly into the DOM.

• Reactive HTML Binding: The placeholder {count} within the showHtml string is automatically updated when the count value changes. No manual updates are needed; the reactivity system ensures that the HTML content updates dynamically.

Conclusion

The i-html directive in Olova.js not only injects HTML into the DOM but also automatically reflects updates to reactive variables inside the HTML content. This makes it a powerful tool for handling dynamic content within your application, allowing you to build more interactive UIs.

No Manual Updates Required Unlike traditional template rendering, where you'd manually update the HTML when variables change, Olova.js handles this automatically. When the count changes, the framework ensures the HTML inside i-html is re-rendered with the new value.