Skip to content

Instantly share code, notes, and snippets.

@hikumealan
Forked from frostzzone/index-1.html
Created May 24, 2023 01:05
Show Gist options
  • Save hikumealan/8f71190280db6e4d96e07944d281d08b to your computer and use it in GitHub Desktop.
Save hikumealan/8f71190280db6e4d96e07944d281d08b to your computer and use it in GitHub Desktop.
Using ejs browser client
<!-- File 1/1 -->
<body>
<template id="names">
<% for (let name of names) { %>
<div><%= name%></div>
<% } %>
</template>
<!-- Import ejs -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/ejs.min.js"></script>
<div id="target"></div>
<script>
const templateHTML = document.getElementById("names")
.innerHTML
.replace(/\&lt;/g, "<")
.replace(/\&gt;/g, ">");
document.getElementById("target").innerHTML = ejs.render(templateHTML, {names: ["corey", "noah", "alex", "dan"]});
</script>
</body>
<!-- File 1/2 -->
<body>
<main id="target"></main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/ejs.min.js"></script>
<script>
fetch("names.ejs").then(async res => {
const resText = await res.text();
document.getElementById("target").innerHTML = ejs.render(resText, {names: ["corey", "noah", "alex", "dan"]});
})
</script>
</body>
<!-- File 2/2 -->
<% for (let name of names) { %>
<div><%= name%></div>
<% } %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment