KnockoutJS - 行と列の計算

Question

この質問は、私の最初の質問「Nested Data, Loading Children」に続きます。

私は、ネストされたオブジェクトを含むJSONからのデータが入ったテーブルを持っています（色分け参照）。この表には、オブジェクトごとに編集可能な行が1つ含まれています。これは「割り当て」行と呼ばれます。

これらの値は、JSONオブジェクト（「値」：{" n"：4、 "n2"：2など）から取り込まれます。

まず、編集可能な行ごとに合計を表示したいとします。行内で値が更新されると、合計が更新されます。この背後にあるこのユースケースは、元の合計（Allocation.Total）と観測可能な合計を比較したいので、データが変更されたかどうかを示すコントロールセルのcssクラスを変更できます。

これを以下に示します。 （イエロー指示ユーザの変更）

http://i.stack.imgur.com/XQpLp.jpg

質問の第2の部分は、列合計を扱っています。上記の質問は私の頭が少し傷ついていたが、これは私の心を吹く。私はそのように私はその人の上で寝るだろうし、それが少し明確になったら質問を更新します。

単純化されたデータモデルを使用することから生じた1つの複雑さがあります。その中で、すべてが同じタイプのオブジェクトであると言うことで、ノードに子がある場合、割り当てに使用される単語を変更する必要があります。ノードに子どもの割り当てがある場合、ガイドと呼ばれる必要があります。柱部を更新しました

Simplified Code Example here...

... Allocated.Totalは、割り当ての実行中の合計です。ここでの違いは、この合計が表の列を処理していることです。これも可能ですか？私の心は少し溶け始めました。

アップデート - ノード1、ノード2、ノード3に対してハードコーディングすることによって、これをアプローチすることが可能であるが、列の合計については

4月の26日。私はこれが避けることを望んでいました。これは、ユーザー/リクエストに応じて変化するノードであるためです（たとえば、node1、node2、node3などではありません）。私はこの情報をサーバーサイドで見つけることができるので、HTMLテンプレートでこの問題を解決しました。正しいバインディングでページを配信できるようになりました。

私はJavaScriptで同じアプローチを使用できますが、APIからデータをロードするときには、この情報を動的に取得できる必要があり、JavaScriptはきれいで清潔なままです。私はnode1、node2、node3ビットが動的になるように、（キー、ペア）値を反復処理する方法を見てきました。しかし、これは私がかなり固執したところです。

2番目の部分は、実際に複雑になります。総額は私が後にしているものの一部ですが、私はまた、個々の列（月曜日 - 朝食、月曜日 - 昼食、月曜日 - ダイナー）の合計が必要です。これは最も深いノードから非常に上までカスケードします。

同じことが償還された場合も同じです。だから、誰かがチケットを償還することができます。これは、親ノードまでずっと反映されています。 XPathsを愛する人としては、これは祖先 - または - 自己::クルーだろう。

Answer 1

OK。あなたの合計が計算されるべきものがここにあります。

self.totalAllocation = ko.computed(function() { 
      var values = self.Allocation.Values; 
      return Number(values.node1()) + 
        Number(values.node2()) + 
        Number(values.node3()); 
}) 

ノードの角かっこに注意してください。これは、これらがノックアウト観測値に変更されたことを示します。あなたの現在のコードでは、それらは単にjson値です。ノンオブザーバブルはノックアウト値/テキストバインディングとの間でバインドできますが、値が変更されたときには他の人に通知しません。 totalAllocationが単純なjson値を使用していた場合、値バインディングを介して変更されたときに自動的に再計算されません。

マッピングプラグインを使用するようにサンプルを更新しました。これは自動的にあなたのすべてのプロパティをスピンし、それらを観測可能にします。

割り当てのラベルは単純なものです。これは、計算されたテキストバインディングで実現できます。

self.allocLabel = ko.computed(function() { 
    return self.HasChildren() ? "Guide" : "Allocation";    
}); 

<th data-bind="text: allocLabel">Allocation</th> 

最後の部分で完全にはっきりしませんでした。 Allocated.Totalにすべての子割り当てを合計したいと思うようです。これには償還額が含まれていますか？それ自身の割り当てられた合計を含めるべきですか？答えが何であれ、それを行う方法は、計算された観測可能性を再び持ちます。

何かが好きです。

self.grandTotal = ko.computed(function() { 
    var result = 0;    
    for (var i = 0; i < self.Crews().length; i += 1) { 
     result += self.Crews()[i].totalAllocation(); 
    } 
    return result; 
}); 

あなたは、私は単にクルー配列ループスルーして、それぞれの子のためのtotalAllocationを合算見ることができます。行の割り当て番号を更新すると、行合計と列合計が更新されます。コメント欄で述べたように

http://jsfiddle.net/madcapnmckay/CGBZe/

EDIT

。動的合計は問題ではありません（テストされていない）。

self.totalAllocation = ko.computed(function() { 
    var values = self.Allocation.Values; 
    var total = 0; 
    for (var prop in values) { 
     total += Number(ko.utils.unwrapObservable(values[prop])); 
    } 
    return total; 
}) 

これが役に立ちます。