Template engine
Overview
The <template app> tag in the Deshi Framework acts as the core of the
template engine. It allows you to define HTML content that will be automatically
rendered and appended to the element with id="root". This structure makes
it possible to dynamically generate content based on data or logic, streamlining
the process of building complex user interfaces.
Usage
index.html
<div id="root"></div>
<template app>
<!-- HTML and custom attributes here -->
</template>
All HTML elements written inside the <template app> will be processed by
the Deshi Framework and appended to the element with id="root" in the main HTML.
Key Features:
- Automatic Rendering:
Any content inside the <template app> will automatically be inserted into
the #root element when the page loads.
- Dynamic Binding:
Data and expressions can be embedded using curly braces {} for binding to
values from the JavaScript object (signal ).
main.js
<script>
signal = {
message: 'Hello, World!',
}
</script>
Example
index.html
<template app>
<button $text="{counter} {counter <= 1 ? 'time' : 'times'}"></button>
</template>
main.js
<script>
signal = {
counter: 0,
};
</script>
Example Usage
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeshiJs Framework Example</title>
</head>
<body>
<div id="root"></div>
<template app>
<button
$text="{counter} {counter <= 1 ? 'time' : 'times'}"
@click="incrementCounter()"
></button>
</template>
<script type="module">
import deshi from "//unpkg.com/deshijs";
deshi.init();
signal = {
counter: 0,
incrementCounter: function () {
this.counter++;
},
};
</script>
</body>
</html>
tip