KO Tabs バインディング

データバインディングのオプション：

collapsible
disabled

例：

この例では、タブと組み合わせて使用する ViewModel が定義されています。このビューには、disabled および collapsible プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。この例のタブは、ユーザーが折りたたむことができます。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.collapsible = ko.observable(false); };

バインドコントロールを使用したビューの作成：

ビューのマークアップ	コードのコピー
<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>

ビューのマークアップ

コードのコピー

<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>

関連トピック

参照