List

List Rendering

To map an array to elements use

<!-- {{model:<myModelName>}} --><myListPrototype><!-- {{/model:<myModelName>}} -->

To create model use createModel class. It has basic methods add/update/remove. You could extend the class method to have more control how the list should behave.

NOTE: To modify the list reassigned new value to the list. Usage of map filter reduce concat is encouraged and does not affect the dom-diffing efficiency.

import Keet, { html, CreateModel } from 'keet'

class App extends Keet {
  el = 'app'
  task = new CreateModel()
  render() {
    this.task.subscribe(model =>
      // callBatchPoolUpdate - custom method to force update 
      // component states.If the component has predefine state(s) 
      // that get reassigned within this closure we can safely 
      // ignore calling this method.
      this.callBatchPoolUpdate()
    )
    
    Array.from(['run', 'jog', 'walk', 'swim', 'roll']).map(taskName => {
      this.task.add({ taskName: taskName })
    })
    
    return html`

      <h4>myModel</h4>
      <ul id="list">
        <!-- {{model:task}} -->
        <li>
          {{taskName}}
        </li>
        <!-- {{/model:task}} -->
      </ul>

    `
  }
}

const app = new App()

Codepen Sample

See the Pen Keetjs - List by Shahrul Nizam b. Selamat (@syarul) on CodePen.