lightview
Version:
Small, simple, powerful web UI and micro front end creation ... Great ideas from Svelte, React, Vue and Riot combined.
79 lines (68 loc) • 2 kB
HTML
<head>
<title>Directives</title>
<script src="../../lightview.js?as=x-body"></script>
</head>
<body>
<div style="margin:20px">
<p>
Show: <input type="checkbox" value="${on}">
<div l-if="${on}">
Now you've done it. You've exposed me.
</div>
</p>
<p>
<p>
How would you like that burger?<br>
<select value="${options}" multiple>
<option>lettuce</option>
<option>tomato</option>
<option>cheese</option>
</select>
</p>
For (defaults to each)
<ul l-for:each="${options}">
<li>${index}:${item}</li>
</ul>
For Each
<ul l-for:each="${options}">
<li>${index}:${item}</li>
</ul>
For Values
<ul l-for:values="${options}">
<li>${item}:${index}</li>
</ul>
For Keys
<ul l-for:keys="${options}">
<li>${item}</li>
</ul>
For Entries
<ul l-for:entries="${options}">
<li>${item[0]}:${item[1]}</li>
</ul>
Variable Values
<p id="variables"></p>
</div>
<script id="lightview">
(document.currentComponent||(document.currentComponent=document.body)).mount = async function() {
self.variables({on: "boolean", options: Array}, {reactive});
on = true;
options = ["lettuce"];
// demo instrumentation
const variableValues = () => {
const el = self.getElementById("variables");
while (el.lastElementChild) el.lastElementChild.remove();
self.getVariableNames().forEach((name) => {
const line = document.createElement("div");
line.innerText = `${name} = ${JSON.stringify(self.getVariableValue(name))}`;
el.appendChild(line);
});
};
variableValues();
addEventListener("change", () => {
variableValues()
});
}
</script>
</body>
</html>