KO ComboBox バインディング

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

autoComplete
autoFilter
data
disabled
highlightMatching
isEditable
labelText
selectedIndex
selectionMode
showTrigger
triggerPosition

例：

この例では、コンボボックスと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、labelText、showTrigger、triggerPosition、autoFilter、autoComplete、highlightMatching、selectionMode、isEditable、selectedIndex、および data プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。

トリガー（ドロップダウン矢印）はコンボボックスの左側に配置され、ドロップダウンリストから複数の項目を選択できます。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.labelText = ko.observable(null); self.showTrigger = ko.observable(true); self.triggerPosition = ko.observable('right'); self.autoFilter = ko.observable(true); self.autoComplete = ko.observable(true); self.highlightMatching = ko.observable(true); self.selectionMode = ko.observable('single'); self.isEditable = ko.observable(true); self.selectedIndex = ko.observable(-1); self.data = ko.observable(createList()); };

ViewModel スクリプト

コードのコピー

var viewModel = function () {  
   var self = this;  
   self.disabled = ko.observable(false);
   self.labelText = ko.observable(null);
   self.showTrigger = ko.observable(true);
   self.triggerPosition = ko.observable('right'); 
   self.autoFilter = ko.observable(true); 
   self.autoComplete = ko.observable(true); 
   self.highlightMatching = ko.observable(true); 
   self.selectionMode = ko.observable('single'); 
   self.isEditable = ko.observable(true); 
   self.selectedIndex = ko.observable(-1); 
   self.data = ko.observable(createList());
};

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

ビューのマークアップ	コードのコピー
<input id="combo" data-bind="wijcombobox: { disabled: disabled, labelText: labelText, showTrigger: showTrigger, triggerPosition: triggerPosition, isEditable: isEditable, autoComplete: autoComplete, autoFilter: autoFilter, highlightMatching: highlightMatching, selectedIndex: selectedIndex, data: data, selectionMode:selectionMode}"/>

ビューのマークアップ

コードのコピー

<input id="combo" data-bind="wijcombobox: { 
    disabled: disabled, 
    labelText: labelText, 
    showTrigger: showTrigger, 
    triggerPosition: triggerPosition, 
    isEditable: isEditable, 
    autoComplete: autoComplete, 
    autoFilter: autoFilter, 
    highlightMatching: highlightMatching, 
    selectedIndex: selectedIndex, 
    data: data,
    selectionMode:selectionMode}"/>

関連トピック

参照