Not able to instantiate router #9

b12k · 2015-11-18T12:02:07Z

Hello. Can you, please, guide me how to instantiate a router.
Here is very simple example of my playground:

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>

    <ko-component-router></ko-component-router>

    <script type="text/javascript" src="node_modules/knockout/build/output/knockout-latest.debug.js"></script>
    <script type="text/javascript" src="node_modules/ko-component-router/dist/ko-component-router.js"></script>
    <script type="text/javascript" src="src/js/app.js"></script>
</body>
</html>

app.js

(function(){
    'use strict';

    ko.router.route('/', 'Index');
    ko.router.start();

    function IndexVM(ctx) {
        console.log('IndexVM Loaded');
    }

    ko.components.register('Index', {
        template: "Index Template",
        viewModel: IndexVM
    });

})();

I have a local server with "ko-router.dev" URI.
Well it does nothing actually.

Thanx in advance for help.

BTW: I think you have a mistake in basic usage docs -> 'Hello' vs 'Home'

caseyWebb · 2015-11-18T17:46:27Z

try moving the ko.components.register above ko.router lines.

Thanks for pointing out the typo 👍

caseyWebb · 2015-11-18T17:47:24Z

I see the confusion w/ the docs regarding the order of the code. I've really been meaning to write a blog post on how we use knockout + webpack/browserify for modular Knockout SPA goodness.

b12k · 2015-11-20T09:04:52Z

Unfortunately it doesn't work.

(function(){
    'use strict';

    ko.components.register('FirstComponent', {
        template: '<h1 data-bind="text: tmplName"></h2>',
        viewModel: function(ctx){
            this.tmplName = 'First template';
            console.dir(ctx);
        }
    });

    ko.components.register('SecondComponent', {
        template: '<h1 data-bind="text: tmplName"></h2>',
        viewModel: function(ctx){
            this.tmplName = 'Second template';
            console.dir(ctx);
        }
    });

    ko.router.route('/first', 'FirstComponent');
    ko.router.route('/second', 'SecondComponent');
    ko.router.start();

})();

Can you, please, provide a working example?

B3rn475 · 2015-11-29T16:27:53Z

add

ko.applyBindings();

after

ko.router.start();

caseyWebb · 2016-01-05T21:50:01Z

please see the example site and docs for the newly published v3 and re-open if necessary

caseyWebb closed this as completed Jan 5, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not able to instantiate router #9

Not able to instantiate router #9

b12k commented Nov 18, 2015

caseyWebb commented Nov 18, 2015

caseyWebb commented Nov 18, 2015

b12k commented Nov 20, 2015

B3rn475 commented Nov 29, 2015

caseyWebb commented Jan 5, 2016

Not able to instantiate router #9

Not able to instantiate router #9

Comments

b12k commented Nov 18, 2015

caseyWebb commented Nov 18, 2015

caseyWebb commented Nov 18, 2015

b12k commented Nov 20, 2015

B3rn475 commented Nov 29, 2015

caseyWebb commented Jan 5, 2016