@profiscience/knockout-contrib-router-plugins-title
v2.0.18
Published
[![Version][npm-version-shield]][npm] [![Dependency Status][david-dm-shield]][david-dm] [![Peer Dependency Status][david-dm-peer-shield]][david-dm-peer] [![Dev Dependency Status][david-dm-dev-shield]][david-dm-dev] [![Downloads][npm-stats-shield]][npm-sta
Downloads
27
Readme
router.plugins.title
Set document.title
for a route. Supports nesting/composition.
Usage
import { Route, createTitleRoutePlugin } from '@profiscience/knockout-contrib'
Route.usePlugin(createTitleRoutePlugin())
// Basic
new Route('/', {
title: 'Home',
})
// Sync Accessor Function
new Route('/profile', [loadUser], {
title: (ctx) => `Profile | ${ctx.user.name}`,
})
// Async Accessor Function
new Route('/profile', {
title: async (ctx) => `Profile | ${await getUserName()}`,
})
Nested Routing
If you have nested routes that both supply a title, by default they will be joined with "|"...
new Route('/', {
title: 'My Awesome App',
children: [
new Route('/', {
title: 'Home',
}),
new Route('/profile', {
title: 'Profile',
}),
],
})
If you land on /
the title will be set to "My Awesome App | Home"; likewise navigating to /profile
will update the title to "My Awesome App | Profile".
Using a Custom Formatter
If you'd like to using something other than "|" to join your routes, you may pass a custom formatter function to createTitleRoutePlugin
.
Route.usePlugin(
createTitleRoutePlugin((ts: string[]) => `My Awesome App | ${ts.join(' > ')}`)
)