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 ofmap
filter
reduce
concat
is encouraged and does not affect thedom-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.