Enable setting navigation options with m.route.link API

This commit is contained in:
Patrik Johnson 2017-08-08 15:06:30 +03:00
parent 217b9c194c
commit 131e61002e
4 changed files with 50 additions and 9 deletions

View file

@ -52,7 +52,7 @@ module.exports = function($window, redrawService) {
} }
route.get = function() {return currentPath} route.get = function() {return currentPath}
route.prefix = function(prefix) {routeService.prefix = prefix} route.prefix = function(prefix) {routeService.prefix = prefix}
route.link = function(vnode) { var link = function(options, vnode) {
vnode.dom.setAttribute("href", routeService.prefix + vnode.attrs.href) vnode.dom.setAttribute("href", routeService.prefix + vnode.attrs.href)
vnode.dom.onclick = function(e) { vnode.dom.onclick = function(e) {
if (e.ctrlKey || e.metaKey || e.shiftKey || e.which === 2) return if (e.ctrlKey || e.metaKey || e.shiftKey || e.which === 2) return
@ -60,9 +60,13 @@ module.exports = function($window, redrawService) {
e.redraw = false e.redraw = false
var href = this.getAttribute("href") var href = this.getAttribute("href")
if (href.indexOf(routeService.prefix) === 0) href = href.slice(routeService.prefix.length) if (href.indexOf(routeService.prefix) === 0) href = href.slice(routeService.prefix.length)
route.set(href, undefined, undefined) route.set(href, undefined, options)
} }
} }
route.link = function(args) {
if (args.tag == null) return link.bind(link, args)
return link({}, args)
}
route.param = function(key) { route.param = function(key) {
if(typeof attrs !== "undefined" && typeof key !== "undefined") return attrs[key] if(typeof attrs !== "undefined" && typeof key !== "undefined") return attrs[key]
return attrs return attrs

View file

@ -281,6 +281,36 @@ o.spec("route", function() {
o($window.location.href).equals(env.protocol + "//" + (env.hostname === "/" ? "" : env.hostname) + slash + (prefix ? prefix + "/" : "") + "test") o($window.location.href).equals(env.protocol + "//" + (env.hostname === "/" ? "" : env.hostname) + slash + (prefix ? prefix + "/" : "") + "test")
}) })
o("passes options on route.link", function() {
var opts = {}
var e = $window.document.createEvent("MouseEvents")
e.initEvent("click", true, true)
$window.location.href = prefix + "/"
route(root, "/", {
"/" : {
view: function() {
return m("a", {
href: "/test",
oncreate: route.link(opts)
})
}
},
"/test" : {
view : function() {
return m("div")
}
}
})
route.set = o.spy(route.set)
root.firstChild.dispatchEvent(e)
o(route.set.callCount).equals(1)
o(route.set.args[2]).equals(opts)
})
o("accepts RouteResolver with onmatch that returns Component", function(done) { o("accepts RouteResolver with onmatch that returns Component", function(done) {
var matchCount = 0 var matchCount = 0
var renderCount = 0 var renderCount = 0

View file

@ -25,6 +25,7 @@
- API: Introduction of `m.redraw.sync()` ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592)) - API: Introduction of `m.redraw.sync()` ([#1592](https://github.com/MithrilJS/mithril.js/pull/1592))
- API: Event handlers may also be objects with `handleEvent` methods ([#1939](https://github.com/MithrilJS/mithril.js/issues/1939)). - API: Event handlers may also be objects with `handleEvent` methods ([#1939](https://github.com/MithrilJS/mithril.js/issues/1939)).
- API: `m.route.link` accepts an optional `options` object ([#1930](https://github.com/MithrilJS/mithril.js/pull/1930))
#### Ospec improvements: #### Ospec improvements:

View file

@ -104,7 +104,7 @@ Argument | Type | Required | Description
This function can be used as the `oncreate` (and `onupdate`) hook in a `m("a")` vnode: This function can be used as the `oncreate` (and `onupdate`) hook in a `m("a")` vnode:
```JS ```JS
m("a[href=/]", {oncreate: m.route.link})`. m("a[href=/]", {oncreate: m.route.link})
``` ```
Using `m.route.link` as a `oncreate` hook causes the link to behave as a router link (i.e. it navigates to the route specified in `href`, instead of navigating away from the current page to the URL specified in `href`. Using `m.route.link` as a `oncreate` hook causes the link to behave as a router link (i.e. it navigates to the route specified in `href`, instead of navigating away from the current page to the URL specified in `href`.
@ -112,15 +112,21 @@ Using `m.route.link` as a `oncreate` hook causes the link to behave as a router
If the `href` attribute is not static, the `onupdate` hook must also be set: If the `href` attribute is not static, the `onupdate` hook must also be set:
```JS ```JS
m("a", {href: someVariable, oncreate: m.route.link, onupdate: m.route.link})` m("a", {href: someVariable, oncreate: m.route.link, onupdate: m.route.link})
``` ```
`m.route.link(vnode)` `m.route.link` can also set the `options` passed to `m.route.set` when the link is clicked by calling the function in the lifecycle methods:
```JS
m("a[href=/]", {oncreate: m.route.link({replace: true})})
```
`m.route.link(args)`
Argument | Type | Required | Description Argument | Type | Required | Description
----------------- | ----------- | -------- | --- ----------------- | ---------------| -------- | ---
`vnode` | `Vnode` | Yes | This method is meant to be used as or in conjunction with an `<a>` [vnode](vnodes.md)'s [`oncreate` and `onupdate` hooks](lifecycle-methods.md) `args` | `Vnode|Object` | Yes | This method is meant to be used as or in conjunction with an `<a>` [vnode](vnodes.md)'s [`oncreate` and `onupdate` hooks](lifecycle-methods.md)
**returns** | | | Returns `undefined` **returns** | `function` | | Returns the onclick handler function for the component
##### m.route.param ##### m.route.param