KO Accordion バインディング

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

disabled
requireOpenedPane
selectedIndex

例：

この例では、アコーディオンと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、requireOpenedPane、および selectedIndex プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。たとえば、ユーザーが別のペインをクリックして選択すると、ViewModel の selectedIndex 値が自動的に更新されます。

ViewModel の作成：

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

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

ビューのマークアップ	コードのコピー
<div data-bind="wijaccordion: { disabled: disabled, requireOpenedPane: requireOpenedPane, selectedIndex: selectedIndex}"> <div> <h3> <a href="#">First</a></h3> <div> <p> First Pane </p> </div> </div> <div> <h3> <a href="#">Second</a></h3> <div> <p> Second Pane </p> </div> </div> </div>

ビューのマークアップ

コードのコピー

<div data-bind="wijaccordion: {

    disabled: disabled, 

    requireOpenedPane: requireOpenedPane, 

    selectedIndex: selectedIndex}">
    <div>
        <h3>
            <a href="#">First</a></h3>
        <div>
            <p>
                First Pane
            </p>
        </div>
    </div>
    <div>
        <h3>
            <a href="#">Second</a></h3>
        <div>
            <p>
                Second Pane
            </p>
        </div>
    </div>
</div>

関連トピック

参照