2016-07-01 11:38:53 +02:00
|
|
|
<html>
|
2016-12-11 19:35:29 +01:00
|
|
|
<head>
|
|
|
|
|
<title>Vanilla example</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script src="../../dist/choo.min.js"></script>
|
|
|
|
|
<script src="../../dist/html.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
const app = choo()
|
2016-07-01 11:38:53 +02:00
|
|
|
|
2016-12-11 19:35:29 +01:00
|
|
|
app.model({
|
|
|
|
|
namespace: 'counter',
|
|
|
|
|
state: { count: 0 },
|
|
|
|
|
reducers: {
|
|
|
|
|
increment: (state, data) => ({count: state.count + 1}),
|
|
|
|
|
decrement: (state, data) => ({count: state.count - 1})
|
|
|
|
|
}
|
|
|
|
|
})
|
2016-07-01 11:38:53 +02:00
|
|
|
|
2016-12-11 19:35:29 +01:00
|
|
|
const mainView = (state, prev, send) => {
|
|
|
|
|
return html`
|
|
|
|
|
<main class="app">
|
|
|
|
|
<h1>Counter example</h1>
|
|
|
|
|
<div>
|
|
|
|
|
Count: ${state.counter.count}
|
|
|
|
|
<button onclick=${(e) => send('counter:increment')}>+</button>
|
|
|
|
|
<button onclick=${(e) => send('counter:decrement')}>-</button>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
`
|
|
|
|
|
}
|
2016-07-01 11:38:53 +02:00
|
|
|
|
2016-12-11 19:35:29 +01:00
|
|
|
app.router(['/', mainView])
|
|
|
|
|
const tree = app.start()
|
|
|
|
|
document.body.appendChild(tree)
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2016-07-01 11:38:53 +02:00
|
|
|
</html>
|
