KO Splitter バインディング

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

disabled
fullSplit
showExpander
splitterDistance

例：

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

ViewModel の作成：

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

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

ビューのマークアップ	コードのコピー
<div class="splitterContainer"> <div class="layout"> <h3>Vertical</h3> <div id="vsplitter" data-bind="wijsplitter: { disabled: disabled, showExpander: showExpander, splitterDistance: splitterDistance }"> <div>panel1</div> <div>panel2</div> </div> </div> <div class="layout" style="width: 100px;"> </div> <div class="layout"> <h3>Horizontal</h3> <div id="hsplitter" data-bind="wijsplitter: { orientation: 'horizontal', disabled: disabled, showExpander: showExpander, splitterDistance: splitterDistance }"> <div>panel1</div> <div>panel2</div> </div> </div> </div>

ビューのマークアップ

コードのコピー

<div class="splitterContainer">
<div class="layout">
<h3>Vertical</h3>
<div id="vsplitter" data-bind="wijsplitter: {
        disabled: disabled, 
        showExpander: showExpander,
        splitterDistance: splitterDistance }">
<div>panel1</div>
<div>panel2</div>
</div>
</div>
        <div class="layout" style="width: 100px;"> </div> 
        <div class="layout">
        <h3>Horizontal</h3> 
        <div id="hsplitter" data-bind="wijsplitter: {
                        orientation: 'horizontal', 
                        disabled: disabled, 
                        showExpander: showExpander, 
                        splitterDistance: splitterDistance }">  
                        <div>panel1</div>
                        <div>panel2</div>
                        </div>
                        </div>
                        </div>

関連トピック

参照