Table of contents
TODO MVC example
<html>
<body>
<style>
html {
background: black;
color: white;
}
</style>
<div id="app">
<script>
const tasks = [{ text: "kup ser" }, { text: "kup mleko" }];
function addTask(value) {
tasks.push({ value });
}
function toggleTask(task) {
task.completed = !!task.completed;
}
function clearCompletedTasks() {
let i = tasks.length;
while (i-- > 0) {
if (task[i].completed) {
tasks.splice(i, 1);
}
}
}
let itemsLeft = tasks.filter((task) => !task.completed).length;
const all = (task) => true;
const active = (task) => !task.completed;
const completed = (task) => task.completed;
let currentFilter = all;
let filteredTasks = tasks.filter(currentFilter);
function setCurrentFilter(newFilter) {
currentFilter = filter;
}
</script>
<ul>
<li for="let task of tasks">
<span bind>task.text</span> <span bind>task.completed</span>
<label>test<input type="checkbox" onclick="toggleTask(task)"></checkbox></label>
</li>
</ul>
items left: <span bind>itemsLeft</span>
</div>
<script src="./vanillin.bundle.js"></script>
<script>
vanillin.bindDOM(document.querySelector("#app"), console.log, console.error, { window });
</script>
</body>
</html>