KnockoutJS - 行和列計算

Question

這個問題在我的原始和第一個問題'Nested Data, Loading Children'之後。

我有一個表中填充了來自包含嵌套對象的JSON的數據（請參見顏色編碼）。該表包含每個可編輯對象的一行。這稱爲「分配」行。

這些值由JSON對象填充（「Values」：{「 n」：4，「n2」：2等）。

首先我想顯示每個可編輯行的總數。由於值在行內更新了總更新。這個背後的用例是我想比較原始總數（Allocation.Total）和可觀察總數，所以我可以更改控件單元格上的css類以指示數據是否已更改。

這如下所示; （黃色指示的用戶的變化）

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

問題的第二部分是處理一列總計。上面的問題讓我的頭部受到了一點傷害，但是這個打擊了我的頭腦。因此，我會睡在那一個，然後更新問題，一旦它變得更清楚一點。

從使用簡化的數據模型出現了一種複雜化。通過說所有事物都是相同類型的對象，（機組人員），當節點有孩子時，用於分配的詞需要改變。如果節點有兒童'分配'應該被稱爲指南。

Simplified Code Example here...

與柱體部...的Allocated.Total更新，是一個運行總的劃分。這裏的區別在於這個總數正在表格的列中排列，沒有排在單個行上。這甚至有可能嗎？我的思緒開始融化了一點。

更新 - 四月 26日

對於列總計雖然可以通過硬編碼針對節點1，節點2，節點3接近這一點。我希望避免這種情況，因爲這些是根據用戶/請求而改變的節點（例如，它不總是節點1，節點2，節點3）。我已經在HTML模板中解決了這個問題，因爲這些信息可以在服務器端找到，使我能夠使用正確的綁定來提供頁面。

我可以對JavaScript使用相同的方法，但是當我們從API中加載數據時，必須可以動態獲取這些信息，然後JavaScript仍然很乾淨。我一直在研究如何迭代（鍵，對）值，所以node1，node2，node3位可以變爲動態的。然而，這是我陷入困境的地方。

第二部分，它變得非常複雜。總分是我之後的一部分，但我也需要每個專欄的總額（週一 - 早餐，週一 - 午餐，週一 - 晚餐）。這從最深的節點級聯到最高級。

Redeemed也是如此。因此，一個人可以兌換一張票，它一直反映到父節點。作爲喜歡XPath的人，這將是祖先或自己::船員。

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

希望這會有所幫助。