KO Slider バインディング

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

animate
disabled
dragFill
max
min
minRange
orientation
ranges
step
value
values

例：

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

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.val = ko.observable(50); self.min = ko.observable(0); self.max = ko.observable(100); self.disabled = ko.observable(false); self.animate = ko.observable(false); self.range = ko.observable(false); self.step = ko.observable(1); self.dragFill = ko.observable(true); self.minRange = ko.observable(0); self.vals = ko.observableArray([10, 50]); };

ViewModel スクリプト

コードのコピー

var viewModel = function () {             
   var self = this; 
   self.val = ko.observable(50); 
   self.min = ko.observable(0);
   self.max = ko.observable(100); 
   self.disabled = ko.observable(false); 
   self.animate = ko.observable(false);     
   self.range = ko.observable(false);     
   self.step = ko.observable(1);         
   self.dragFill = ko.observable(true);     
   self.minRange = ko.observable(0);     
   self.vals = ko.observableArray([10, 50]);
};

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

ビューのマークアップ	コードのコピー
<div data-bind="wijslider: { value: val, min: min, max: max, disabled: disabled, animate: animate, range: range, step: step, dragFill: dragFill, minRange: minRange}"> </div>

関連トピック

参照