Add views section to readme

There are probably additional things we can add to this section, but hopefully this is a good start. #11

I left out `params` because it looks like [it's going away](https://github.com/yoshuawuyts/choo/issues/35).
This commit is contained in:
Tim Wisniewski
2016-06-20 23:57:46 -04:00
committed by GitHub
parent d1e6185fa4
commit 237144db7f
+14 -1
View File
@@ -325,7 +325,20 @@ within namespaced `models`, and usage should preferably be kept to a minimum.
Changing views all over the place tends to lead to messiness. Changing views all over the place tends to lead to messiness.
## Views ## Views
[docs wip] Views are pure functions that return a DOM tree for the router to render. Theyre passed the current state, and any time the state changes theyre run again with the new state.
Views are also passed the `send` function, which they can use to dispatch actions that can update the state. For example, the DOM tree can have an `onclick` handler that dispatches an `add` action.
```javascript
const view = (params, state, send) => {
return choo.view`
<div>
<h1>Total todos: ${state.todos.length}</h1>
<button onclick=${(e) => send('add', { payload: {title: 'demo'})}>Add</button>
</div>`
}
```
In this example, when the `Add` button is clicked, the view will dispatch an `add` action that the models `add` reducer will receive. [As seen above](#models), the reducer will add an item to the states `todos` array. The state change will cause this view to be run again with the new state, and the resulting DOM tree will be used to [efficiently patch the DOM](#does-choo-use-a-virtual-dom).
## Common Actions ## Common Actions
### HTTP ### HTTP