KO Tabs Binding

Data-binding options:

collapsible
disabled

Example:

In this example, the ViewModel is defined specifically for use with the tabs. It has disabled and collapsibleproperties that are bound in the View. If any of these values change, the widgets automatically respond to them. The widgets also update the ViewModel values as they modify them. The tabs in this example can be collapsed by the user.

Create a ViewModel:

ViewModel Script	Copy Code
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.collapsible = ko.observable(false); };

Create View with Bound Controls:

View Markup	Copy Code
<div data-bind="wijtabs: {disabled: disabled, collapsible : collapsible}" > <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li> <li><a href="#tabs-2">Proin dolor</a></li> <li><a href="#tabs-3">Aenean lacinia</a></li> </ul> <div id="tabs-1"> <p>Tab1</p> </div> <div id="tabs-2"> <p>Tab2 </p> </div> <div id="tabs-3"> <p>Tab3 </p> </div> </div>

View Markup

Copy Code

<div data-bind="wijtabs: {disabled: disabled, collapsible : collapsible}" >  
    <ul>  
        <li><a href="#tabs-1">Nunc tincidunt</a></li>  
        <li><a href="#tabs-2">Proin dolor</a></li>  
        <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul>  
    <div id="tabs-1">  
        <p>Tab1</p>  
    </div>  
    <div id="tabs-2">  
        <p>Tab2 </p>  
    </div>  
    <div id="tabs-3">  
        <p>Tab3 </p>  
    </div>  
</div>

Concepts

Widgets

Reference