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.