\n For the most part, you don't have to think about nested routing,\n it just works.\n
\n\n The only caveat is that the parent component's route must be suffixed\n with a !.\n
\n ctx will have query and state\n objects just as you would expect, and they are scoped to the local router.\n To better understand this, check out the demo below.\n\n Reading the source for this page is also highly recommended.\n
\nko.components.register('foo-router', {\n viewModel: class FooRouter {\n constructor(ctx) {\n this.qsParam = ctx.query.get('foo', 'foo')\n\n this.state = ko.pureComputed({\n read() {\n return JSON.stringify(ctx.state())\n },\n write(v) {\n ctx.state(JSON.parse(v))\n }\n })\n\n this.routes = {\n '/foo': 'foo',\n '/bar': 'bar',\n '/baz': 'baz',\n '/qux': 'qux',\n // note the suffixed `!` denoting a child path may exist\n '/fooception/!': 'foo-router'\n }\n }\n\n randomString() {\n return lipsum[Math.floor(Math.random() * 100)]\n }\n\n randomObj() {\n const obj = {}\n for (let i = 0; i < 5; i++) {\n obj[lipsum[Math.floor(Math.random() * 100)]] = lipsum[Math.floor(Math.random() * 100)]\n }\n return obj\n }\n },\n template: `"+(0,c.default)('\n \n \n\n \n requires valid JSON\n \n\n foo\n bar\n baz\n qux\n foo-ception\n\n \n \n ')+'`\n})\n\nko.components.register(\'foo\', {\n template: \'foo!\'\n})\n\n// ...\n\n ko-component-router is a client-side router that allows you\n to easily build single page apps with KnockoutJS. It supports all the things\n you would expect a road-worthy spa router to support, with just enough\n Knockout magic thrown in.\n
\n It aims to be as performant as possible by batching\n updates, and it provides simple abstractions for working with querystring parameters\n and history.state is a self-contained manner.\n
\n
\n$ npm install ko-component-router\n\n'use strict'\n\nrequire('ko-component-router')\n\nko.components.register('app', {\n viewModel: class App {\n constructor() {\n this.routes = {\n '/': 'home',\n '/user/:id': 'user'\n }\n }\n },\n template: `"+(0,l.default)("\n \n \n ")+"`\n})\n\nko.components.register('home', {\n template: `"+(0,l.default)('Show user')+"`\n})\n\nko.components.register('user', {\n viewModel: class User {\n constructor(ctx) {\n // ctx contains a bunch of information about the\n // current state of the router\n\n // many are read/write observables,\n // see each section for more info\n }\n },\n template: '"+(0,l.default)("User: ")+'\'\n})\n\nko.applyBindings()\n\n'+(0,l.default)('\n\n\n For the most part, you don't have to think about nested routing,\n it just works.\n
\n\n The only caveat is that the parent component's route must be suffixed\n with a !.\n
\n ctx will have query and state\n objects just as you would expect, and they are scoped to the local router.\n To better understand this, check out the demo below.\n\n Reading the source for this page is also highly recommended.\n
\nko.components.register('foo-router', {\n viewModel: class FooRouter {\n constructor(ctx) {\n this.qsParam = ctx.query.get('foo', 'foo')\n\n this.state = ko.pureComputed({\n read() {\n return JSON.stringify(ctx.state())\n },\n write(v) {\n ctx.state(JSON.parse(v))\n }\n })\n\n this.routes = {\n '/foo': 'foo',\n '/bar': 'bar',\n '/baz': 'baz',\n '/qux': 'qux',\n // note the suffixed `!` denoting a child path may exist\n '/fooception/!': 'foo-router'\n }\n }\n\n randomString() {\n return lipsum[Math.floor(Math.random() * 100)]\n }\n\n randomObj() {\n const obj = {}\n for (let i = 0; i < 5; i++) {\n obj[lipsum[Math.floor(Math.random() * 100)]] = lipsum[Math.floor(Math.random() * 100)]\n }\n return obj\n }\n },\n template: `"+(0,c.default)('\n \n \n\n \n requires valid JSON\n \n\n foo\n bar\n baz\n qux\n foo-ception\n\n \n \n ')+'`\n})\n\nko.components.register(\'foo\', {\n template: \'foo!\'\n})\n\n// ...\n\\n For the most part, you don\\'t have to think about nested routing,\\n it just works.\\n
\\n\\n The only caveat is that the parent component\\'s route must be suffixed\\n with a !.\\n
\\n ctx will have query and state\\n objects just as you would expect, and they are scoped to the local router.\\n To better understand this, check out the demo below.\\n\\n Reading the source for this page is also highly recommended.\\n
\\nko.components.register(\\'foo-router\\', {\\n viewModel: class FooRouter {\\n constructor(ctx) {\\n this.qsParam = ctx.query.get(\\'foo\\', \\'foo\\')\\n\\n this.state = ko.pureComputed({\\n read() {\\n return JSON.stringify(ctx.state())\\n },\\n write(v) {\\n ctx.state(JSON.parse(v))\\n }\\n })\\n\\n this.routes = {\\n \\'/foo\\': \\'foo\\',\\n \\'/bar\\': \\'bar\\',\\n \\'/baz\\': \\'baz\\',\\n \\'/qux\\': \\'qux\\',\\n // note the suffixed `!` denoting a child path may exist\\n \\'/fooception/!\\': \\'foo-router\\'\\n }\\n }\\n\\n randomString() {\\n return lipsum[Math.floor(Math.random() * 100)]\\n }\\n\\n randomObj() {\\n const obj = {}\\n for (let i = 0; i < 5; i++) {\\n obj[lipsum[Math.floor(Math.random() * 100)]] = lipsum[Math.floor(Math.random() * 100)]\\n }\\n return obj\\n }\\n },\\n template: `' + (0, _escapeHtml2.default)('\\n \\n \\n\\n \\n requires valid JSON\\n \\n\\n foo\\n bar\\n baz\\n qux\\n foo-ception\\n\\n \\n \\n ') + '`\\n})\\n\\nko.components.register(\\'foo\\', {\\n template: \\'foo!\\'\\n})\\n\\n// ...\\n