1

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?

Curiosdev
  • 11
  • 2
  • 1
    Depending on the requirements, you should probably consider having a separate viewmodel for each tab, and again if it fits with the requirements have each tab populated with an ajax call. – beon Nov 09 '12 at 01:29
  • Or are you looking to create tabs dynamically, based on the viewmodel data? – beon Nov 09 '12 at 01:31
  • Looking for something like this: http://jsfiddle.net/tyrsius/UCGRZ/ – Kyeotic Nov 09 '12 at 01:56
  • @beon The main answer here: [link](http://stackoverflow.com/questions/9293761/knockoutjs-multiple-view-models-in-a-single-view) seems reasonable for having multiple view models. I'm not looking to create the tabs dynamically – Curiosdev Nov 09 '12 at 17:37
  • @Tyrsius I not sure if understand your example. It seems the same as my implementation – Curiosdev Nov 09 '12 at 18:57
  • @Curiosdev Sorry that was supposed to be a question. Is this like what you are looking for? – Kyeotic Nov 09 '12 at 19:01
  • @beon this is the example I came up with: ttp://jsfiddle.net/curiousdev/REnaE/ – Curiosdev Nov 09 '12 at 19:05

2 Answers2

3

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!

Shane Doyle
  • 1,066
  • 1
  • 12
  • 16
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>
Anders
  • 17,306
  • 10
  • 76
  • 144