fix #55

dist/ko-component-router.js

@@ -69,7 +69,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	_knockout2.default.components.register('ko-component-router', {
-	  synchronous: true,
 	  viewModel: _router2.default,
 	  template: '<div data-bind=\'if: ctx.route().component\'>\n      <div class="component-wrapper" data-bind=\'component: {\n        name: ctx.route().component,\n        params: ctx\n      }\'></div>\n    </div>'
 	});
@@ -2225,7 +2224,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 
 	  // allow adjacent routers to initialize
-	  _knockout2.default.tasks.schedule(function () {
+	  (window.requestAnimationFrame || window.setTimeout)(function () {
 	    return _knockout2.default.applyBindingsToNode(el, bindingsToApply);
 	  });
 	}

example/views/nested-routing.js

@@ -104,6 +104,7 @@ ko.components.register('foo', {
 })
 
 ko.components.register('foo-router', {
+  synchronous: true,
   viewModel: class FooRouter {
     constructor(ctx) {
       this.qsParam = ctx.query.get('foo', 'foo')
@@ -178,6 +179,7 @@ ko.components.register('foo-router', {
 })
 
 ko.components.register('foo', {
+  synchronous: true,
   template: `
     <div class="alert alert-success">
       foo!
@@ -186,6 +188,7 @@ ko.components.register('foo', {
 })
 
 ko.components.register('bar', {
+  synchronous: true,
   template: `
     <div class="alert alert-danger">
       bar!
@@ -194,6 +197,7 @@ ko.components.register('bar', {
 })
 
 ko.components.register('baz', {
+  synchronous: true,
   template: `
     <div class="alert alert-info">
       baz!
@@ -202,6 +206,7 @@ ko.components.register('baz', {
 })
 
 ko.components.register('qux', {
+  synchronous: true,
   template: `
     <div class="alert alert-warning">
       qux!

lib/binding.js

@@ -114,7 +114,7 @@ function applyBinding(el, bindings, ctx) {
   }
 
   // allow adjacent routers to initialize
-  _knockout2.default.tasks.schedule(function () {
+  (window.requestAnimationFrame || window.setTimeout)(function () {
     return _knockout2.default.applyBindingsToNode(el, bindingsToApply);
   });
 }

lib/index.js

@@ -13,7 +13,6 @@ require('./binding');
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 _knockout2.default.components.register('ko-component-router', {
-  synchronous: true,
   viewModel: _router2.default,
   template: '<div data-bind=\'if: ctx.route().component\'>\n      <div class="component-wrapper" data-bind=\'component: {\n        name: ctx.route().component,\n        params: ctx\n      }\'></div>\n    </div>'
 });

package.json

@@ -13,7 +13,7 @@
     "watch": "babel src -wd lib & webpack --watch",
     "lint": "eslint --max-warnings=0 *.js",
     "format": "eslint --fix --max-warnings=0 *.js",
-    "stage-dist": "git add dist example/dist",
+    "stage": "git add lib dist example/dist",
     "test": "karma start",
     "test:watch": "karma start karma.watch.js",
     "example:build": "webpack -p --config webpack.config.example.js",
@@ -28,7 +28,7 @@
     [
       "build"
     ],
-    "stage-dist"
+    "stage"
   ],
   "keywords": [
     "knockoutjs",

src/binding.js

@@ -73,7 +73,7 @@ function applyBinding(el, bindings, ctx) {
   }
 
   // allow adjacent routers to initialize
-  ko.tasks.schedule(() => ko.applyBindingsToNode(el, bindingsToApply))
+  (window.requestAnimationFrame || window.setTimeout)(() => ko.applyBindingsToNode(el, bindingsToApply))
 }
 
 function getRoute(ctx, path) {

src/index.js

@@ -3,7 +3,6 @@ import router from './router'
 import './binding'
 
 ko.components.register('ko-component-router', {
-  synchronous: true,
   viewModel: router,
   template:
     `<div data-bind='if: ctx.route().component'>

test.js

@@ -78,7 +78,7 @@ function runTests(t, config) {
     })
     // path binding is applied asynchronously
     // this is by design, not a hack to get passing tests
-    .step((done) => ko.tasks.schedule(done))
+    .step((done) => setTimeout(done, 100))
     .step(() => {
       const nestedRouter = ko.contextFor($('ko-component-router', dom).get(0)).$router
       const link = $('#nested-bar', dom).get(0)