Building a Better Router - new

new.js

import ko from 'knockout'
import Router from 'ko-component-router'

Router.useRoutes({
  '/user/:id': ['user-show', loadUser,
    {
      '/': 'user-overview',
      '/todos': ['user-todos' loadUserToDos]
    }
  ]
})

ko.components.register('user-show', {
  template: `
    <h1 data-bind="text: user.name"></h1>
    <ko-component-router></ko-component-router>
  `,
  viewModel: class {
    constructor(ctx) {
      this.user = ctx.user
    }
  }
})

ko.components.register('user-overview', {
  template: `
    <span data-bind="text: user.foo"></span>
  `,
  viewModel: class {
    constructor(ctx) {
      this.user = ctx.$parent.user
    }
  }
})

ko.components.register('user-todos', {
  template: `
    <ul data-bind="foreach: user.todos">
      ...
    </ul>
  `,
  viewModel: class {
    constructor(ctx) {
      this.todos = ctx.todos
    }
  }
})

function loadUser(ctx) {
  const p = $.get('/api/user', { id: ctx.params.id })
  p.then((user) => ctx.user = user)
  ctx.queue(p)
}

function loadUserTodos(ctx) {
  const p = $.get('/api/user/todos', { id: ctx.$parent.params.id })
  p.then((todos) => ctx.todos = todos)
  ctx.queue(p)
}