7

私は、Knockout-JSでパーセンテージ値を表示/編集するための正しいアプローチ（より一般的には、これらのような再利用可能なコンポーネントを作成する方法）を見つけようとしています。

私のViewModelには、小数として保存されたパーセンテージである観測可能な値があります。たとえば、50％を表す場合は0.5です。ユーザーが混乱しないように（たとえば、「50」）、値をパーセンテージ形式（たとえば、「50」）で表示および編集したいと思います（ユーザーは簡単に混乱します）。

書き込み可能計算

書き込み可能な計算関数を設定することで、簡単なバージョンを作成できました。http：//jsfiddle.net/Quango/fvpjN/を参照してください。

ただし、値ごとに再実装する必要があるため、これはあまり再利用できません。エクステンダーを試してみましたが、これにより基本的な値が効果的にマスクされ、使用できなくなりました。

BindingHandlers

必要なのはバインディングハンドラーだと思うので、書く代わりに

<input data-bind="value: commission" />

私は書くだろう

<input data-bind="percentage: commission" />

knockout.jsの「value」bindingHandlerのコードを確認しましたが、バインディング用のコードがたくさんあるので、それを複製したくありません。

だから私の質問は：

  1. この種の値変換を行うための良い/標準/テンプレートの方法はありますか？

  2. そうでない場合は、既存のコードをコピーして貼り付けることなく、「値」バインディングを再利用する方法はありますか？

4

2 に答える 2

15

私はいつもエクステンダーを書きたかった。それで、ノックアウトエクステンダーを介して実装されるあなたの質問に対する別の答えがここにあります。

これが好きなのか、パーセンテージクラスのものが好きなのかはまだ決まっていません。

HTML

<input data-bind="value: p1.percentage, valueUpdate: 'afterkeydown'"></input>%
= <span data-bind="text: p1"></span>

JavaScript

ko.extenders.percentage = function(target, option) {
    target.percentage = ko.computed({
        read: function() {
            return this() * 100;
        },
        write: function(value) {
            this(value/100);
        },
        owner: target
    });
    return target;
};

var model = {
    p1: ko.observable(0.5).extend({'percentage': true})
}

ko.applyBindings(model)

ライブデモ

http://jsfiddle.net/DWRLr/

于 2013-01-31T18:01:59.167 に答える
3

分数の値とパーセンテージの値を一緒にラップして、再利用可能なコンポーネントになるのはどうですか。

HTML

<input data-bind="value: p1.value, valueUpdate: 'afterkeydown'"></input>
<h1><span data-bind="text: p1.frac"></span> = <span data-bind="text: p1"></span></h1>

JavaScript

function Percentage(frac) {
    this.frac = ko.observable(frac);
    this.value = ko.computed({
        read: function() {
            return this.frac() * 100;
        },
        write: function(value) {
            this.frac(value/100);
        },
        owner: this
    });
}

Percentage.prototype.toString = function() {
    return this.value() + '%';
}

var model = {
    p1: new Percentage(0.5)
}

ko.applyBindings(model)

ライブデモ

http://jsfiddle.net/9kCkm/1/

于 2013-01-31T17:43:28.513 に答える