Navigation problems with pager.js

Question

Im trying to implement pager.js in my knockout SPA. It is working, sort of, however i am experiencing some strange behaviour, even though I have followed the official guide..

My page structure look like this.

<div data-bind="page: { id='start', title='index'}">
</div>

<div data-bind="page: { id='mainPage1', title='mainPage1'}">
</div>

//implement deep nav??
<div data-bind="page: { id='mainPage2', title='mainPage2'}">
    //Grid page
    <div data-bind="page: { id='start', title='grid'}">     
        //Error here - page dont exist? | URL output: mainPage2/detail 
        <a data-bind="page-href: '../detail' ">go to detail page.</a> 
    </div>

    //Detail page
    <div data-bind="page: { id='detail', title='detail'}">
    </div>  
</div>

Also when i type in the url I can navigate to mainPage2 by this url: /mainPage1/dsjak/adsPae1/madaadsnPage1/mainPage2

Aslong as the last part of the url is valid it will navigate to that part of the page, is this intended?

Not sure if this can have anything to do with my Back end routing but it looks like this..

routes.MapRoute(
            name: "Default",
            url: "{*catchall}",
            defaults: new { controller = "Home", action = "Index" }
        );

I am also using require.js..

This doesn't answer your question however you might want to take a look the work that is being done on [this Github repo](https://github.com/Profiscience/ko-component-router). — Ricardo Brandão, Apr 29 '16 at 13:37

score 0 · Answer 1 · answered Apr 29 '16 at 14:47

Your syntax is all wrong

e.g. id='start' change to id:'start'

it should be

<div data-bind="page: { id:'start', role: 'start', title:'index'}">start</div>

<div data-bind="page: { id:'mainPage1', title:'mainPage1'}">page 1</div>

<div data-bind="page: { id:'mainPage2', title:'mainPage2'}">
    page2
    <div data-bind="page: { id:'start', title:'grid'}">     
        //Error here - page dont exist? | URL output: mainPage2/detail 
        <a data-bind="page-href: '../detail' ">go to detail page.</a> 
    </div>

//Detail page
    <div data-bind="page: { id:'detail', title='detail'}"></div>  
</div>

Navigation problems with pager.js

1 Answers1