Using Middleware to Create Declarative Views

// component middleware
ko.router.use((ctx) => {
  Object.defineProperty(ctx, 'component', {
    set(component) {
      ko.components.register(ctx.canonicalPath, component)
      ctx.route.component = ctx.canonicalPath
    }
  })
})

// title middleware
ko.router.use((ctx) => {
  Object.defineProperty(ctx, 'title', {
    set(title) {
      document.title = title
    }
  })
})

ko.applyBindings({
  routes: {
    '/': (ctx) => {
      ctx.title = 'Home'
      ctx.component = {
        template: '<h1>Welcome to my App!</h1>'
      }
    }
  }
})

or, with a little fp magic...

import { curryRight, extend } from 'lodash'

const setView = curryRight(extend, 2)

const createSetterMiddleware = (prop, middleware) => (ctx) => {
  Object.defineProperty(ctx, prop, {
    set: (v) => middleware(v, ctx)
  })
}

const componentSetterMiddleware = createSetterMiddleware('component', (c, ctx) => {
  ko.components.register(ctx.canonicalPath, component)
  ctx.route.component = ctx.canonicalPath
})

const titleSetterMiddleware = createSetterMiddleware('title', (t) => {
  document.title = t
})

ko.router.use(componentSetterMiddleware)
ko.router.use(titleSetterMiddleware)

ko.applyBindings({
  routes: {
    '/': setView({
      title: 'Home',
      component: {
        template: '<h1>Welcome to my App!</h1>'
      }
    })
  }
})

You did learn you a Haskell for great good, right?