KO SuperPanel バインディング

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

allowResize
autoRefresh
disabled
mouseWheelSupport
showRounder

例：

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

ViewModel の作成：

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

ViewModel スクリプト

コードのコピー

var viewModel = function () {     
    var self = this; 
    self.disabled = ko.observable(false);     
    self.allowResize = ko.observable(true); 
    self.autoRefresh = ko.observable(true); 
    self.mouseWheelSupport = ko.observable(true);     
    self.showRounder = ko.observable(true);
};

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

ビューのマークアップ	コードのコピー
<div id="superPanel" data-bind="wijsuperpanel: { disabled: disabled, allowResize: allowResize, autoRefresh: autoRefresh, mouseWheelSupport: mouseWheelSupport, showRounder: showRounder }" style="width: 754px; height: 300px;"> <div class="elements"> <ul> <li style="background: none repeat scroll 0% 0%activeborder;"><span>ActiveBorder</span></li> <li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span></li> <li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span> </li> <!-- … --> <li style="background: none repeat scroll 0% 0% menu;"><span>MenuBar</span> </li> <li style="background: none repeat scroll 0% 0% highlighttext;"><span>MenuHighlight</span></li> </ul> </div> </div>

ビューのマークアップ

コードのコピー

<div id="superPanel" data-bind="wijsuperpanel: {
       disabled: disabled,
       allowResize: allowResize,
       autoRefresh: autoRefresh,
       mouseWheelSupport: mouseWheelSupport,
       showRounder: showRounder }"
       style="width: 754px; height: 300px;">
       <div class="elements">
       <ul>
       <li style="background: none repeat scroll 0% 0%activeborder;"><span>ActiveBorder</span></li>
       <li style="background: none repeat scroll 0% 0% activecaption;"><span>ActiveCaption</span></li>
       <li style="background: none repeat scroll 0% 0% captiontext;"><span>ActiveCaptionText</span> </li>  <!-- … -->
       <li style="background: none repeat scroll 0% 0% menu;"><span>MenuBar</span> </li>
       <li style="background: none repeat scroll 0% 0% highlighttext;"><span>MenuHighlight</span></li>
       </ul>
       </div>
</div>

関連トピック

参照