1

この質問は、私の最初の最初の質問「ネストされたデータ、子の読み込み」に続くものです。

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

これらの値は、JSONオブジェクトから入力されます（ "値"：{"n"：4、 "n2"：2など）。

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

これを以下に示します。（黄色はユーザーの変更を示します）

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

質問の2番目の部分は、列の合計を扱うことです。上記の質問は私の頭を少し傷つけましたが、これは私の心を吹き飛ばします。そのため、私はその質問で眠り、少し明確になったら質問を更新します。

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

ここに簡略化されたコード例...

列部分で更新...Allocated.Totalは、割り当ての現在の合計です。ここでの違いは、この合計がテーブルの列を下に向かって処理されていることであり、単一の行全体では処理されていません。これも可能ですか？私の心は少し溶け始めました。

更新-4月26日

列の合計については、node1、node2、node3に対してハードコーディングすることでこれにアプローチできます。これらはユーザー/リクエストに応じて変化するノードであるため、これを回避したいと思っていました（たとえば、常にnode1、node2、node3になるとは限りません）。この情報はサーバー側で見つけることができるため、HTMLテンプレートでこの問題に対処し、正しいバインディングでページを配信できるようにしました。

JavaScriptにも同じアプローチを使用できますが、APIからデータを読み込むときに、この情報を動的に取得できる必要があります。そうすれば、JavaScriptはきれいに保たれます。（キー、ペア）値を反復処理する方法を検討してきたので、node1、node2、node3ビットを動的にすることができます。しかし、これは私がかなり行き詰まったところです。

それが本当に複雑になる2番目の部分。総計は私が求めているものの一部ですが、個々の列（月曜日-朝食、月曜日-昼食、月曜日-食堂）ごとの合計も必要です。これは、最も深いノードから最上部までカスケードします。

償還についても同じことが言えます。したがって、人はチケットを引き換えることができ、それは親ノードまで反映されます。XPathsを愛する人として、これは祖先または自己::Crewになります。

4

1 に答える 1

1

わかった。計算された合計は次のようになります。

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;
});

単純にCrews配列をループして、各子のtotalAllocationを合計したことがわかります。行割り当て番号を更新すると、行の合計と列の合計が更新されます。

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

編集

コメントで述べたように。動的合計は問題にはなりません（未テスト）。

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;
})

お役に立てれば。

于 2012-04-24T16:58:51.737 に答える