Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save willkessler/f7b780292b0629f9cea11bb879000543 to your computer and use it in GitHub Desktop.
Save willkessler/f7b780292b0629f9cea11bb879000543 to your computer and use it in GitHub Desktop.
working list adder
const choo = require('choo')
const app = choo()
function view (params, state, send) {
return choo.view`
<main>
<h1>${state.title}</h1>
<ul>
${state.theList.map(function (item) {
return choo.view`<li>${item}</li>`
})}
</ul>
<form onsubmit=${onSubmit}>
New: <input type="text" name="new_item" value="foo"
autofocus
onkeydown=${e => e.keyCode === 13 && onEnter(event) || true}
>
<input type="submit" value="Submit">
</form>
</main>
`
function onEnter (event) {
console.log('onEnter hit');
send('addItem', { data: event.target.value });
event.preventDefault();
}
function onSubmit(event) {
console.log('onsubmit hit');
send('addItem', { data: event.target.value });
event.preventDefault();
}
}
app.model({
state: {
title: 'Some title',
theList: ['item 1', 'item 2', 'item 3', 'item 4' ]
},
reducers: {
addItem: function(action,state) {
console.log('action=', action.data, ' state=', state);
return { theList: state.theList.concat(action.data) }
}
}
});
console.log('sortable');
app.router((route) => [
route('/', view)
]);
const tree = app.start();
document.body.appendChild(tree);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment