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

• Zepto + Navigators (No Transitions): shows one of the most simple configurations possible for switching panes using buttons
• XUI + Navigators (No Transitions): shows one of the most simple configurations possible for switching panes using buttons
• Zepto + Navigators (Transitions): shows switching panes using buttons with transitions

Knockout.js

• Zepto + KnockoutJS + Navigators (Transitions): shows switching panes using buttons with transitions using the PaneNavigator KnockoutJS binding

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

• Zepto / PathJS / KnockoutJS: shows how to use KnockoutJS to bind a page ViewModel

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

• Zepto / PathJS / Navigators (No Transitions): shows simple page navigation without history and animations on a static HTML page.
• XUI / PathJS / Navigators (No Transitions): shows simple page navigation without history and animations on a static HTML page.
• Zepto / PathJS / Navigators (Transitions + No History): shows simple page navigation without history with animations on a static HTML page.
• Zepto / PathJS / Navigators (Default Transition + History): shows simple page navigation with history and a single animation for all transitions on a static HTML page.
• Zepto / PathJS / Navigators (Transitions + History): shows simple page navigation with history and a different animation for each transitions on a static HTML page (routing using PathJS).
• Zepto / BackboneJS / Navigators (Transitions + History): shows simple page navigation with history and a different animation for each transitions on a static HTML page (routing using BackboneJS).

Knockout.js

• Zepto / PathJS / KnockoutJS / Navigators (Transitions + History): shows how KnockoutJS view models can be used to create relationships between pages on a dynamic HTML page

Knockback.js

• Zepto / KnockbackJS / Navigators (Transitions + History): shows how KnockbackJS can use models with relationships to separate page data structure from view models on a dynamic HTML page
• jQueryTmpl (Dynamic Pages) / KnockbackJS / Navigators (Transitions + History): shows how KnockbackJS can use models with relationships to separate page data structure from view models on a dynamic HTML page using query-tmpl
• jQueryTmpl (Dynamic Pages) / KnockbackJS / Navigators (Transitions + History + Embedded): shows how KnockbackJS can use models with relationships to separate page data structure from view models on a dynamic HTML page using query-tmpl and an embedded page navigator (binding managed by HTML rather than JavaScript)