Fluent navigation with knockout.js

Question

I have one single-page application with three sub-pages.

Url structure is:

/page  (sub-page-0)

/page#sub-page-1

/page#sub-page-2

View Model is:

function ViewModel(activePage){
   var self=this;

   self.activePage=ko.observable(activePage);
   self.changePage=function (newPage){
       self.activePage(newPage);
       //change url
   });
}

When user enter url I want to get # part in javascript and construct ViewModel with this parameter.

When user click link in the page I want to change URL and load that sub page.

score 5 · Accepted Answer · edited May 23 '17 at 11:48

5

You could use one of the solutions from the stack overflow question: How can I get query string values in JavaScript?

However, I strongly recommend you consider a client side routing library. The knockout homepage has an example using sammyjs, but there are many other interesting solutions out there (including knockback, which combines backbonejs and knockoutjs).

edited May 23 '17 at 11:48

Community

1
1

answered Aug 09 '12 at 13:34

daedalus28

1,637
1
12
24

score 3 · Answer 2 · answered Aug 09 '12 at 13:32

3

Knockout itself does not support navigation. But you can use third party frameworks. There is a tutorial named "Single page applications" from knockout at http://learn.knockoutjs.com/ which shows how to do that with sammy.js.

answered Aug 09 '12 at 13:32

delixfe

2,471
1
21
35

Fluent navigation with knockout.js

2 Answers2