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..

Answer 1

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>