docs: add router, links

This commit is contained in:
Yoshua Wuyts
2016-05-24 15:42:02 +09:00
parent aa50ae9fb8
commit 5ec046518f
+37 -2
View File
@@ -333,7 +333,30 @@ queueing data. You might want to use a package from `npm` or [write your
own][ws-reconnect] if you're building something for production. own][ws-reconnect] if you're building something for production.
## Router ## Router
[docs wip] The `router` manages which `views` are rendered at any given time. It also
supports rendering a default `view` if no routes match.
```js
const app = choo()
app.router('/404', (route) => [
route('/', require('./views/empty')),
route('/404', require('./views/error')),
route('/:mailbox', require('./views/mailbox'), [
route('/:message', require('./views/email'))
])
])
```
Routes on the `router` are passed in as a nested array. This means that the
entry point of the application also becomes a site map, making it easier to
figure out how views relate to each other.
Under the hood `choo` uses [sheet-router][sheet-router]. Internally the
currently rendered route is kept in `state.app.location`. If you want to modify
the location programmatically the `reducer` for the location can be called
using `send('app:location', { location: href })`. This will not work from
within namespaced `models`, and usage should preferably be kept to a minimum.
Changing views all over the place tends to lead to messiness.
## Views ## Views
[docs wip] [docs wip]
@@ -342,7 +365,18 @@ own][ws-reconnect] if you're building something for production.
[docs wip] [docs wip]
### links ### links
[docs wip] In HTML links are represented with the `<a href="/some-location">` tag. By
default `choo` enables a `subscription` for all `a` tags on a page. When a link
is clicked, the click event is caught, and the value of `href` is passed into
the router causing a state change. If you want to disable this behavior, set
`app.start({ href: false })`.
```js
const nav = choo.view`
<a href="/">home</a>
<a href="/first-link">first link</a>
<a href="/second-link">second link</a>
`
```
### styles ### styles
[docs wip] [docs wip]
@@ -624,3 +658,4 @@ $ npm install choo
[varnish]: https://varnish-cache.org [varnish]: https://varnish-cache.org
[nginx]: http://nginx.org/ [nginx]: http://nginx.org/
[dom]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model [dom]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
[sheet-router]: https://github.com/yoshuawuyts/sheet-router