KnockoutJs app with tabbed User Interface: What is best practice?

Question

I'm constructing a single page KnockoutJs app with multi-tab functionality.

Thus far, I have tried out jQuery UI's tab functionality with the basic idea I had in mind.

Here's a my example: jsfiddle

using this jQuery UI function:

$(document).ready(function() {
$("#tabs").tabs();
});

How would you build out tabs in a Knockoutjs app? Are there best practices?

Does this seem like a good direction? or are there any suggestions on where to look?

Answer 1

Look at my collection of bindings

Checkout the GitHub and example links

Look at the tabs binding

<div data-bind="tabs: tabs, tabsOptions: { selectedTab: selectedTabModel, enable: tabsEnabled }"></div>

Answer 2

I would recommend taking a look at PagerJS.

PagerJS is a JavaScript library based on KnockoutJS and jQuery that provides the possibility of creating single page applications in a declarative fashion - nesting subpages inside subpages where each subpage can be developed standalone but still communicate between each other.

I have a project which is somewhat completed that is using PagerJS for a single page application and it might be of some help to you. KnockoutJS & Pager Example (Not completed)

Hope this helps!