ko component router params and subscriptions

ko-component-router-params-sample.js

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

ko.options.deferUpdates = true;

class Task {
    constructor(id, name) {
        this.id = ko.observable(id);
        this.name = ko.observable(name);
    }
}

ko.components.register('app', {
    synchronous: true,
    viewModel: class App {
        constructor(ctx) {
            //this.base = '/index';
            this.routes = {
                '/': 'overview',
                '/tasks/!': 'tasks'
            };
        }
    },
    template: `
    Overview
    <a data-bind="path: '/'">Overview</a>
    <a data-bind="path: '/tasks/'">Tasks</a>
    <ko-component-router id="root" params="
      base: base,
      routes: routes,
      hashbang: false">
    </ko-component-router>
  `
});

ko.components.register('overview', {
    synchronous: true,
    viewModel: class OverView {
        constructor(ctx) {
        }
    },
    template: `OverView`
})

ko.components.register('tasks', {
    synchronous: true,
    viewModel: class Tasks {
        constructor(ctx) {
            this.selectedTask = ko.observable();
            this.selectTask = this.selectTask.bind(this);
            this.tasks = ko.observableArray();
            for (var index = 1; index < 10; index++) {
                this.tasks.push(new Task(index, `Task ${index}`));
            }

            this.routes = {
                '/': 'empty-component',
                '/:id': 'task-details'
            }
        }

        selectTask(task) {
            this.selectedTask(task);
            console.log(ko.toJSON(this.selectedTask));
        }
    },
    template: `
    Tasks:</br>
    Selected task: <span data-bind="text: selectedTask().name()"></span> 
    <ul data-bind="foreach: { data: tasks, as: 'task' }">
        <li>
        <!-- I should be able to use '/' + task.id, but it's not working. still have to use /tasks/task.id -->
        <a data-bind="path: '/tasks/' + task.id(), text: task.name, click: $parent.selectTask"></a>
        </li>
    </ul>
     <ko-component-router id="child" params="routes: routes">
    </ko-component-router>`
})

ko.components.register('task-details', {
    synchronous: true,
    viewModel: class TaskDetails {
        constructor(ctx) {
            this.selectedTaskId = ko.observable(ctx.params.id());

            ctx.params.id.subscribe((newValue) => {
                alert("The new task id is " + newValue);
            });
        }
    },
    template: `Task details for task <span data-bind="text: selectedTaskId"></span>`
})


ko.components.register('empty-component', {
    synchronous: true,
    viewModel: class Empty {
        constructor(ctx) {
        }
    },
    template: `<span></span>`
})

ko.applyBindings();