1

ノックアウト js を使用してこれを行う最もエレガントな方法を考えようとしています。

3 つの値を合計する必要があるとしますが、結果の合計も編集できます...ノックアウト js を使用してこれを行うにはどうすればよいでしょうか?

ユーザーが合計値を編集したときに合計を構成する値を無効にし、合計フィールドが空白の場合はそれらを再度有効にする設定に沿って考えていました。

出発点として、この jsfiddle を参照してください: http://jsfiddle.net/faHHB/

計算されたオブザーバブルを使用して文字列を分解する同様の例は、ノックアウトのドキュメントにあります。

function MyViewModel() {
    this.firstName = ko.observable('Planet');
    this.lastName = ko.observable('Earth');

    this.fullName = ko.computed({
        read: function () {
            return this.firstName() + " " + this.lastName();
        },
        write: function (value) {
            var lastSpacePos = value.lastIndexOf(" ");
            if (lastSpacePos > 0) { // Ignore values with no space character
                this.firstName(value.substring(0, lastSpacePos)); // Update "firstName"
                this.lastName(value.substring(lastSpacePos + 1)); // Update "lastName"
            }
        },
        owner: this
    });
}

ko.applyBindings(new MyViewModel());

編集 より明確にするために、この状況をどのように表現するのが最善かわかりません:

3 つのフィールドが家の価値、車の価値、退職貯蓄の価値を表し、合計が資産の合計価値を表しているとします。

すべてのフィールドは編集可能である必要があり、ユーザーが 3 つの値を入力すると、合計値が計算されます。合計値は直接編集することもできます (ユーザーがリストにない他の貯蓄を持っている場合)。これを表現する最良の方法がわかりません...

ユーザーが合計を編集するとき、私が考えることができるオプションは次のとおりです。

  1. 合計を 3 で割り、他の値を設定します
  2. 入力値をグレー表示し、合計値が空白の場合にのみユーザーが値を変更できるようにします。
  3. 計算というラベルの付いたチェックボックスを用意します。これは、チェックを入れると値を合計し、チェックを外すとユーザーが編集できるようにします。

この状況を表現する最善の方法と、ノックアウトを使用してそれを実装する方法を尋ねようとしていました。わかりにくかったらすみません。

今のところ、アプローチ 3 に落ち着きました: jsfiddle.net/faHHB/10

4

2 に答える 2

2

おそらく次のようなビューモデルが必要です:-

合計を個別のオブザーバブルとして保持します

合計を自動的に計算するかどうかを決定するフラグがあります

フラグが true の場合は editTotal の値を計算し、それ以外の場合は現在の値を返します。

var testVm = function() {
  var self = this;
  self.items = ko.observableArray();
  self.editedTotal = ko.observable(null);
  self.autoCalculate = ko.observable(true);
  self.calculatedTotal = ko.computed(function() {
     if ( self.autoCalculate() ){
         // Perform sum if still calculating
         var total = 0;

         for ( var i = 0; i < self.items().length ) {
           total += self.items()[i].Amount();  
         }

         self.editedTotal(total);
     }

     return self.editedTotal();
  });  
}

で直接編集を検出した場合は、 falseself.editedTotalに設定します。self.autoCalculateその時点で、VM は再計算を試みず、追跡された値を返すだけです。

于 2012-10-31T09:43:40.093 に答える
2

読み取り/書き込みの計算を使用する必要がありますが、最も重要なのは、合計を解析する方法のルールを定義することです。たとえば、合計が変更されたときに val1 のみを更新できます。

var ViewModel = function() {
    var self = this;
    self.val1 = ko.observable(30);
    self.val2 = ko.observable(20);
    self.val3 = ko.observable(10);


    self.sum = ko.computed({
        read: function() {
            return parseInt(self.val1()) + parseInt(self.val2()) + parseInt(self.val3());
        },
        write: function(value) {
            self.val1(parseInt(value) - parseInt(self.val2()) - parseInt(self.val3()));
        }
    });
};

ここにフィドルが働いています：http://jsfiddle.net/vyshniakov/faHHB/1/

ユーザーが合計を変更したときにどのような動作を実現したいですか?

于 2012-10-31T09:41:23.793 に答える