durandaljs 2.0 navigation - durandal

Question

I have a view with pagination. When the user clicks on a page number, I display the data for that page.
I only want the data items to be replaced so I don't want to navigate to the "next page." So what I'm doing is using the router.navigate(url, { replace: false, trigger: false }); to add the page to the browser's history, but not to trigger the navigate there.
If after I get the data, I click on the browser's back button, the URL changes to the previous one, but I don't get an event. If once I'm back in the previous page, I click the browser's forward button, I get the trigger event from that page.
Example. I'm at /# and it is displaying page 1 of the data. The user click on the "next page" link on the page. I display page 2's data, and I replace the url with /#welcome/2 Now if I click on the browser's back button the URL changes back to /# but the page doesn't trigger. If I press the browser's forward button the URL changes back to /#welcome/2 and the page triggers. Now that that has happened, I can click the back button and page one will trigger; and I can go back and forth between page 1 and page 2. If the user clicks on "page 3", the problem happens again.
If you all need a working example, I will deploy it, but currently this is only running on my local box.

Answer 1

IMO paging, like sorting/filtering represent the internal state of a view/widget and shouldn't be presented via routes. Consider e.g. user is on #something/3 and bookmarks the url. After deleting a couple of items there's no #something/3 any longer and the bookmark fails. Here's some more thought food on that topic http://lostechies.com/derickbailey/2011/08/03/stop-using-backbone-as-if-it-were-a-stateless-web-server/
Update based on comments:
activate on hitting browser back get's not called for two reason. a) welcome.js returns a singleton and b) in shell.html viewCache is set to true. When the user press browser forward it get's called because at this time route #welcome/2 from the SPA perspective is called the first time, so activate kicks in.
One way to make the system work would be to force every page change (regardless if it was initialized by SPA or browser) running through activate. Here are the required steps: Convert the singleton into a constructor, set cacheViews: false and replace click events by normal hrefs that calls the page route.
Update 2
Here's an example that combines the inPage navigation (without router involvement) with the ability to use browser back/forth navigation. init is responsible for setting up things that are common for activate and gotoPage.
Viewmodel
define(['plugins/router', 'knockout'], function( router, ko ) {
var ctor = function() {
this.pageNo = ko.observable();
this.pageData = ko.observable();
};
ctor.prototype.activate = function( page ) {
this.init(page);
};
ctor.prototype.init = function( page ) {
this.pageNo(page || 1);
this.pageData('Data for ' + this.pageNo());
};
ctor.prototype.gotoPage = function( page ) {
var url = "extras/welcome/" + page;
this.init(page);
router.navigate(url, { replace: false, trigger: false });
};
return ctor;
});
View
<section>
<h1>
Hello Durandal Pagination
</h1>
<a data-bind="click: gotoPage.bind($data, 1)" style="cursor: pointer;">Page 1</a>
<a data-bind="click: gotoPage.bind($data, 2)" style="cursor: pointer;">Page 2</a>
<a data-bind="click: gotoPage.bind($data, 3)" style="cursor: pointer;">Page 3</a>
<h2 data-bind="text: pageData"></h2>
</section>
Live example at: http://dfiddle.github.io/dFiddle-2.0/#extras/welcome