List (advance)
Todo List
This is a sample list with states and events combine together.
NOTE: Ensure model has a root node with id
import Keet, { html, CreateModel } from 'keet'
const ENTER = 13
class App extends Keet {
el = 'app'
total = 0
task = new CreateModel()
events (obj, target) {
if (target.className === 'edit') {
this.task.update(Object.assign(obj, { complete: !obj.complete }))
} else if (target.className === 'destroy') {
this.task.destroy(obj)
}
}
addTask (e) {
if (e.which === ENTER && e.target.value !== '') {
this.task.add({
taskName: e.target.value,
complete: false
})
}
}
render() {
this.task.subscribe(model => {
this.total = model.length
})
let count = 0
while (count < 3) {
this.task.add({
taskName: `TASK TODO ${count}`,
complete: false
})
count++
}
let name = 'Model Events ({{total}})'
return html`
<h4>${name}</h4>
<p>Add new task with key "Enter"</p>
<p>Toggle a task state by clicking the button</p>
<p>Remove a task by clicking the [ X ]</p>
<div><input id="taskInput" k-keyup="addTask()" type="text" placeholder="Add a task"></div>
<ul id="list" k-click="events()">
<!-- {{model:task}} -->
<li>
<button class="edit" style="text-decoration: {{complete?line-through:none}};">
{{taskName}}
</button>
<span class="destroy" style="cursor: pointer;"> [ X ] </span>
</li>
<!-- {{/model:task}} -->
</ul>
`
}
}
const app = new App()
Codepen Sample
See the Pen Keetjs - List(advance) by Shahrul Nizam b. Selamat (@syarul) on CodePen.
SVG
A sample list with SVG
NOTE: Ensure SVG node is place within another node container i.e LI
See the Pen svg hexagon loader with Keet.js by Shahrul Nizam b. Selamat (@syarul) on CodePen.