KnockbackNavigators.js provides page navigators, a pane navigator, and transition animations to help you make dynamic, single-page applications. They are platform-agnostic so you can even use them without using Knockback.js or Knockout.js!

Please take a look at the following example pages to see just how easy and little HTML and JavaScript is required to do some amazing things.

kb.PaneNavigator Examples

kb.PaneNavigator provides an embedded pane navigator that has a history stack of panes and that can optionally use transition animations when navigating between them.

If you are using Knockback.js or No Knockout.js, you are able to observe changes on the active page by calling activePane() or previousPane() during ko.observable subscription generation cycles.

No Knockback.js / No Knockout.js

Knockout.js

kb.PageNavigatorSimple Examples

kb.PageNavigatorSimple provides a page navigator that has one active page at a time.

If you are using Knockback.js or No Knockout.js, you are able to observe changes on the active page by calling activePage() or activeUrl() during ko.observable subscription generation cycles.

No Knockback.js / No Knockout.js

  • Zepto / PathJS: shows one of the most simple configurations possible using PathJS for routing
  • Zepto / BackboneJS: shows one of the most simple configurations possible using BackboneJS for routing

Knockout.js

Knockback.js

  • Zepto / KnockbackJS: shows how to use KnockbackJS to define Models for each page and generate ViewModels for the pages and the relationships between the pages
  • Zepto / KnockbackJS: shows how to use KnockbackJS to define Models for each page and generate ViewModels for the pages and the relationships between the pages. Rather than creating the page navigator before binding the page, the page navigator and router are created during the page binding.
kb.PageNavigatorPanes Examples

kb.PageNavigatorPanes provides a page navigator that has a history stack of panes and that can optionally use transition animations when navigating between them. History can also be useful for keeping pages in memory (you can also provide a 'no_cache' option with re-loading 'callback' to disable caching).

If you are using Knockback.js or No Knockout.js, you are able to observe changes on the active page by calling activePage(), activeUrl(), previousPage(), or previousUrl() during ko.observable subscription generation cycles.

No Knockback.js / No Knockout.js

Knockout.js

Knockback.js