---
id: todo
title: List (advance)
sidebar_label: List (advance)
---
## Todo List
This is a sample list with states and events combine together.
> NOTE: Ensure model has a root node with id
```js
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`
```
```html