:metal: KnockoutJS Goodies Monorepo
For your convenience, the router includes a binding called path
that allows
you to set the href of anchor tags without mucking around with the base path
and having to juggle different levels too much.
NOTE: The path binding sets the href attribute, so it will only work on anchor tags for navigation. However, it can be used on any element for styling.
Parses path using utils.traversePath
<a data-bind="path: '/foo'"></a>
This will route to the /foo
route on the current router (the one that this
page belongs to).
<a data-bind="path: '//foo'"></a>
This will route to the /foo
route at the top-level router.
parent
<a data-bind="path: '../foo'"></a>
This will route to the /foo
route at the parent router.
child
<a data-bind="path: './foo'"></a>
This will route to the /foo
route at the child (adjacent) router.
By default, the router adds the active-path
css class to any anchor with a
path binding that resolves to the current page. To use a class other than
active-path
, you may configure it globally in the router’s config as
activePathCSSClass
, or use the supplementary pathActiveClass
binding.
<a data-bind="path: '/foo', pathActiveClass: 'foo-active'"></a>
If you only need this fuctionality, you may use the activePath
binding instead. This will behave almost exactly the same, however the href attribute will not be set.
Partial matches are supported using *
. For example, if you have a nested route structure such as…
new Route('/foos', [
new Route('/foo', ...),
new Route('/bar', ...),
new Route('/baz', ...),
new Route('/qux', ...)
])
And you would like to apply the active-path
class to an element if the route is any of the child routes belonging to the “foos” route (i.e. ‘/foos/foo’, ‘/foos/bar’, etc.), use the following…
<a data-bind="path: '/foos/*'">Foos</a>
The wildcard must be the last character, and it must be immediately preceeded by a /
. It will be disregarded for the purposes of setting the href if used with the path
binding.