weblate: New Born 
- Best javascript library to load dynamic template
weblate Installation
npm i weblate
<script src="https://cdn.jsdelivr.net/combine/npm/lodash,npm/weblate/weblate/weblate.min.js"></script>
weblate Example
Example
<body>
<div>
<weblate id="my_temp" src="template/weblate_title.html" type="template">
Loading...
</weblate>
<weblate class="form-select form-select-lg mb-3" id="my_temp3" type="select">
Loading...
</weblate>
<weblate id="my_temp2" src="template/weblate_title.html" type="template">
Loading...
</weblate>
</div>
<script src="https://cdn.jsdelivr.net/combine/npm/lodash,npm/weblate/weblate/weblate.min.js"></script>
</body>
var data = {
title: "Constructing HTML weblate",
};
var author = [
{ name: "Guru" },
{ name: "Gurudev" },
{ name: "Test" },
{ name: "Webphonix" },
];
var dd_data = [
{ value: "1", text: "webphonix" },
{ value: "2", text: "webphonix2" },
{ value: "3", text: "webphonix3" },
{ value: "4", text: "webphonix4" },
{ value: "5", text: "webphonix5" },
{ value: "6", text: "webphonix6" },
];
$$("#my_temp2").weblate({ names: author });
weblate("#my_temp").on("weblate", { title: data }, function (d) {
console.log(d);
});
$$("#my_temp3").weblate(dd_data);
- Inside template/weblate_title.html
<div>
<h1>
<%= title.title %>
<h1>
<ul>
<% _.each(names, function(n){ %>
<li>
<%- n.name %>
</li>
<% }) %>
</ul>
</div>
<div class="row">
<% _.each(names, function(n){ %>
<div class="col-md-6">
<%- n.name %>
</div>
<% }) %>
</div>