ziggurat.js
Version:
a tiny modular js library for templates and other shorthands
44 lines (36 loc) • 1.28 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<zg-template id="todo" hidden>
<li> [ <zg-var> todo </zg-var> ] </li>
</zg-template>
<zg-template id="person" hidden>
<span style="color: red"> <zg-var> name </zg-var></span>
<span style="color: blue"><zg-var> surname </zg-var></span>
<br>
</zg-template>
<script src="https://cdn.jsdelivr.net/npm/imperative-html@0.1/dist/global/elements.min.js"></script>
<script src="/ziggurat.min.js" defer></script>
</head>
<body>
<h1>Exhibit A: Todo list (using <code>zg templates</code>)</h1>
<p>Todo list:</p>
<ul id="todos">
</ul>
<form zg-submit="addTodo">
<input type="text" name="todo" placeholder="todo">
<input type="submit">
</form>
<h1>Exhibit B: Counter (using <code>zg-mirror</code>)</h1>
<p id="counter">'<zg-bind name="counter"></zg-bind>'</p>
<button onclick="counter.v++">+</button>
<button onclick="counter.v--">-</button>
<h1>Exhibit C: Chunked AJAX (using <code>zg-stream</code>)</h1>
<p id="stream" style="max-height: 200; overflow-y: scroll"></p>
<button onclick="startStreaming()">Make HTTP Request</button>
<script src="/test.js" defer></script>
</body>
</html>