Github Stars:
Last Commit: 
Created: 
Overview
web-template.js is a template engine based on ES6 template strings parsing. It is a pure native browser parser with no dependencies or compilation needed. It is easy to learn and use, with support for dom-diff partial updates for efficient performance. The code is minimal, making it convenient for learning and extending. The template engine is suitable for native development scenarios that require template rendering capabilities, such as rendering a large list of items. It provides a cleaner and more readable syntax compared to using raw ES6 template strings.
Features
- Pure native browser parsing with no dependencies
- Support for dom-diff partial updates for efficient performance
- Minimal code size for easy learning and extension
- Support for key attribute for list rendering
- Support for various template syntax, including data binding, JavaScript expressions, and directives
- Scope support for each loop in list rendering
- Support for fragment tags and block tags for different rendering scenarios
- Mounting method for easily rendering templates on the web page
Installation
To use web-template.js, follow these steps:
- Download the web-template.js file.
- Include the web-template.js file in your HTML file.
- Add the
<template>tag to your HTML file and place your template inside it. - Use the web-template.js methods to render the template with your data.
Here is an example of how to use web-template.js:
<!DOCTYPE html>
<html>
<head>
<title>Web Template Example</title>
<script src="web-template.js"></script>
</head>
<body>
<template id="my-template">
<ul>
<li>${name}</li>
</ul>
</template>
<div id="container"></div>
<script>
const template = webTemplate.createTemplate('#my-template');
const data = {
name: 'John Doe',
};
const html = template.render(data);
document.getElementById('container').innerHTML = html;
</script>
</body>
</html>
Summary
web-template.js is a lightweight template engine that leverages ES6 template strings parsing. It provides a simple and efficient way to render templates on web pages without any additional dependencies or compilation. With features like dom-diff partial updates and support for various template syntax, it offers high-performance rendering capabilities for native web development scenarios. Its minimal code size and easy installation make it a convenient tool for learning and extending template rendering functionality.
