Wijmo ユーザーガイド > 概念 > ウィジェットを統合するフレームワーク > Knockoutの使用 > 双方向のライブバインディング > KO LinearGauge バインディング |
データバインディングのオプション:
例:
この例では、リニアゲージと組み合わせて使用する ViewModel が定義されています。このビューには、disabled、min、max、および value プロパティがバインドされています。これらのいずれかの値が変更されると、ウィジェットは自動的にその変化に応答します。ウィジェットは、これらの値を変更する際に ViewModel の値も更新します。このゲージの範囲は 0 〜 100 になり、初期値は 50 になります。
ViewModel の作成:
ViewModel スクリプト |
コードのコピー |
---|---|
var viewModel = function () { var self = this; self.min = ko.observable(0); self.max = ko.observable(100); self.val = ko.observable(50); }; |
バインドコントロールを使用したビューの作成:
ビューのマークアップ |
コードのコピー |
---|---|
<div data-bind="wijlineargauge: { value: val, min: min, max: max, ranges: [{ startWidth: 0.2, endWidth: 0.2, startValue: 0, endValue: val, startDistance: 0.6, endDistance: 0.6, style: { fill: '#ccc', stroke: 'none'}}] }"> </div> |