KO List バインディング

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

addHoverItemClass
autoSize
disabled
keepHighlightOnMouseLeave
listItems
maxItemCount
selectionMode

例：

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

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.disabled = ko.observable(false); self.selectionMode = ko.observable('single'); self.autoSize = ko.observable(true); self.maxItemsCount = ko.observable(5); self.addHoverItemClass = ko.observable(true); self.keepHightlightOnMouseLeave = ko.observable(false); self.listItems = ko.observableArray(createList()); };

ViewModel スクリプト

コードのコピー

var viewModel = function () {         
   var self = this;
     self.disabled = ko.observable(false);
     self.selectionMode = ko.observable('single');
     self.autoSize = ko.observable(true);
     self.maxItemsCount = ko.observable(5); 
     self.addHoverItemClass = ko.observable(true); 
     self.keepHightlightOnMouseLeave = ko.observable(false); 
     self.listItems = ko.observableArray(createList());
};

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

ビューのマークアップ	コードのコピー
<div id="list" style="width:300px" data-bind="wijlist: { disabled: disabled, selectionMode: selectionMode, autoSize: autoSize, maxItemsCount: maxItemsCount, addHoverItemClass: addHoverItemClass, keepHightlightOnMouseLeave: keepHightlightOnMouseLeave, listItems: listItems}"> </div>

ビューのマークアップ

コードのコピー

<div id="list" style="width:300px" data-bind="wijlist: { 
    disabled: disabled, 
    selectionMode: selectionMode, 
    autoSize: autoSize, 
    maxItemsCount: maxItemsCount, 
    addHoverItemClass: addHoverItemClass, 
    keepHightlightOnMouseLeave: keepHightlightOnMouseLeave, 
    listItems: listItems}">
</div>

関連トピック

参照