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(' > ')}`)
)