rename RouteResolver::view back to render to restore diff semantics

prevent double resolving
This commit is contained in:
Leo Horie 2016-08-23 22:33:18 -04:00
parent 17161a05c5
commit 53a83a58f2
6 changed files with 185 additions and 48 deletions

View file

@ -8,14 +8,14 @@
- [route.link](#route-link)
- [RouteResolver](#routeresolver)
- [routeResolver.onmatch](#routeresolver-onmatch)
- [routeResolver.view](#routeresolver-view)
- [routeResolver.render](#routeresolver-render)
- [How it works](#how-it-works)
- [Typical usage](#typical-usage)
- [Navigating to different routes](#navigating-to-different-routes)
- [Routing parameters](#routing-parameters)
- [Changing router prefix](#changing-router-prefix)
- [Wrapping a layout component](#wrapping-a-layout-component)
- [Advanced component resolution](#advanced-component-resolution)
- [Wrapping a layout component](#wrapping-a-layout-component)
- [Authentication](#authentication)
- [Code splitting](#code-splitting)
@ -82,9 +82,9 @@ Argument | Type | Required | Description
#### RouteResolver
A RouterResolver is an object that contains an `onmatch` method, and optionally a `view` method.
A RouterResolver is an object that contains an `onmatch` method and/or a `render` method. Both methods are optional, but at least one must be present.
`routeResolver = {onmatch, view}`
`routeResolver = {onmatch, render}`
##### routeResolver.onmatch
@ -103,11 +103,11 @@ Argument | Type | Description
`resolve` | `Function(Component)` | Call this function with a component as the first argument to use it as the route's component
**returns** | | Returns `undefined`
##### routeResolver.view
##### routeResolver.render
The `view` method is called on every redraw for a matching route. It is similar to the `view` method in components and it exists to simplify [component composition](#wrapping-a-layout-component).
The `render` method is called on every redraw for a matching route. It is similar to the `view` method in components and it exists to simplify [component composition](#wrapping-a-layout-component).
`vnode = routeResolve.view(vnode)`
`vnode = routeResolve.render(vnode)`
Argument | Type | Description
------------------- | --------------- | -----------
@ -205,7 +205,6 @@ You can also navigate programmatically, via `m.route.set(route)`. For example, `
When navigating to routes, there's no need to explicitly specify the router prefix. In other words, don't add the hashbang `#!` in front of the route path when linking via `m.route.link` or redirecting.
---
### Routing parameters
@ -230,6 +229,8 @@ In the example above, we defined a route `/edit/:id`. This creates a dynamic rou
It's possible to have multiple arguments in a route, for example `/edit/:projectID/:userID` would yield the properties `projectID` and `userID` on the component's vnode attributes object.
In addition to routing parameters, the `attrs` object also includes a `path` property that contains the current route path, and a `route` property that contains the matched routed.
#### Variadic routes
It's also possible to have variadic routes, i.e. a route with an argument that contains URL pathnames that contain slashes:
@ -263,28 +264,6 @@ m.route.prefix("/my-app")
---
### Wrapping a layout component
You can use anonymous components to wrap a layout around a component, or to pass parameters to a top level component
```javascript
var Layout = {
view: function(vnode) {
return m(".layout", vnode.children)
}
}
m.route(document.body, "/", {
"/": {
view: function() {
return m(Layout, Home)
},
}
})
```
---
### Advanced component resolution
Instead of mapping a component to a route, you can specify a RouteResolver object. A RouteResolver object contains a `onmatch()` method and a optionally a `view()` method.
@ -295,7 +274,7 @@ m.route(document.body, "/", {
onmatch: function(vnode, resolve) {
resolve(Home)
},
view: function(vnode) {
render: function(vnode) {
return vnode
},
}
@ -306,6 +285,28 @@ RouteResolvers are useful for implementing a variety of advanced routing use cas
---
### Wrapping a layout component
You can use a RouteResolver to wrap a layout around a component, or to pass parameters to a top level component
```javascript
var Layout = {
view: function(vnode) {
return m(".layout", vnode.children)
}
}
m.route(document.body, "/", {
"/": {
render: function() {
return m(Layout, m(Home))
},
}
})
```
---
### Authentication
The RouterResolver's `onmatch` hook can be used to run logic before the top level component in a route is initializated. The example below shows how to implement a login wall that prevents users from seeing the `/secret` page unless they login.