KO ProgressBar バインディング

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

animationDelay
animationOptions
disabled
fillDirection
indicatorImage
indicatorIncrement
labelAlign
labelFormatString
maxValue
minValue
orientation
toolTipFormatString
value

例：

この例では、プログレスバーと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、fillDirection、labelAlign、maxValue、および value プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。このプログレスバーは、最大値 80 のうち値 40 まで垂直方向に進みます。ラベルは、プログレスバーの下に表示されます。

ViewModel の作成：

ViewModel スクリプト	コードのコピー
var viewModel = function () { var self = this; self.percent = ko.observable(0); self.val = ko.observable(0); self.min = ko.observable(0); self.max = ko.observable(100); self.disabled = ko.observable(false); self.labelAlign = ko.observable('center'); self.fillDirection = ko.observable('east'); self.lfs = ko.observable('{1}%'); self.tfs = ko.observable('{1}%'); self.increment = ko.observable(1); self.img = ko.observable(''); self.delay = ko.observable(0); self.aniDisabled = ko.observable(false); self.easing = ko.observable(null); self.duration = ko.numericObservable(500); };

ViewModel スクリプト

コードのコピー

var viewModel = function () {  
  var self = this;  
     self.percent = ko.observable(0);     
     self.val = ko.observable(0);
     self.min = ko.observable(0);
     self.max = ko.observable(100);
     self.disabled = ko.observable(false);
     self.labelAlign = ko.observable('center'); 
     self.fillDirection = ko.observable('east');
     self.lfs = ko.observable('{1}%');
     self.tfs = ko.observable('{1}%');
     self.increment = ko.observable(1);
     self.img = ko.observable('');
     self.delay = ko.observable(0);
     self.aniDisabled = ko.observable(false);
     self.easing = ko.observable(null);
     self.duration = ko.numericObservable(500);
};

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

ビューのマークアップ	コードのコピー
<div data-bind="wijprogressbar: { value: val, minValue: min, maxValue: max, disabled: disabled, labelAlign: labelAlign, fillDirection: fillDirection, labelFormatString: lfs, toolTipFormatString: tfs, indicatorIncrement: increment, indicatorImage: img, animationDelay: delay, animationOptions: { disabled: aniDisabled, easing: easing, duration: duration} }"> </div>

ビューのマークアップ

コードのコピー

<div data-bind="wijprogressbar: {
    value: val, 
    minValue: min, 
    maxValue: max, 
    disabled: disabled, 
    labelAlign: labelAlign, 
    fillDirection: fillDirection, 
    labelFormatString: lfs, 
    toolTipFormatString: tfs, 
    indicatorIncrement: increment, 
    indicatorImage: img, 
    animationDelay: delay, 
    animationOptions: {
        disabled: aniDisabled, 
        easing: easing, 
        duration: duration}
}">  
</div>

関連トピック

参照