計算的一些投入總和的淘汰賽我的HTML代碼

Question

部分：

視圖模型代碼：

function TimeCardViewModel() { 
    var self = this; 
    self.teamMembers=ko.observableArray(); 
    self.addShift = ko.pureComputed(function() { });    
} 
$.ajax({ 
     type:"POST" 
     url: "/...json" 
    }).then(function(data){ 
     for (var i=0; i<data.length; i++) { 
     timeCardViewModel.teamMembers.push({days:data[i]}); 
     } 
    }, 
     function(){ 
     console.log('failure'); 
     } 
    ) 

天是array of arrays;後者中的每一個包括一個或多個對象。因此，在該模板中，$ data代表位於天陣列內的對象的數組！每個對象都有一個number1 property和一個number2 property。

我要計算這兩個數的值的總和爲所有對象中天這是一個數組的數組，並有很多人內teamMembers這也是一個數組的數組。所以，我希望爲每個元素排列teamMembers。我如何實現這一目標？我想addShift功能做到這一點，進去<td>Total sum</td>其存在的teamMembers每個元素 .Sorry總和如果不能很好描述整個問題...

Answer 1

如果你正在使用這些類型的嵌套工作數據，您可能需要爲每個元素創建視圖模型。

如果我得到你的結構正確的有：

1. 一時間卡，其中包含
2. Teammembers，其中包含
3. 天，其中包含
4. 班次，其中包含
5. 兩個數字

如果您定義了特定對象對於這些元素中的每一個，您都可以很好地瞭解計算值背後的邏輯。

例如：

移位的
• 的totalHours，是number1 + number2
• 一天的totalHours，是每個移位的totalHours
求和
• 等

兩件事你將受益於使用：

• ko.pureComputed自動重新計算總小時
• Array.prototype.reduce在陣列中總結的所有值

我建議考慮看看下面的例子來獲取你如何能構建元素的感覺，彌補你的TimeCard。您可能不需要這麼多的課程級別，但它更容易遵循。

請注意，我沒有放入任何代碼來將您的JSON數據轉換爲新的viewmodel實例。如果您需要幫助，請在評論中告訴我。

function Shift(hoursA, hoursB) { 
 
    var self = this; 
 
    this.hoursA = ko.observable(hoursA); 
 
    this.hoursB = ko.observable(hoursB); 
 
    
 
    // Computed 1: Adds `number1` to `number2` when one of them 
 
    //    changes 
 
    this.totalHours = ko.pureComputed(function() { 
 
    return self.hoursA() + self.hoursB(); 
 
    }); 
 
}; 
 

 
function Day(initialShifts) { 
 
    var self = this; 
 
    this.shifts = ko.observableArray(initialShifts); 
 

 
    // Computed 2: Adds the `totalHours` for each shift 
 
    this.totalHours = ko.pureComputed(function() { 
 
    return self.shifts().reduce(function(result, shift) { 
 
     return result + shift.totalHours(); 
 
    }, 0); 
 
    }); 
 
}; 
 

 
function TeamMemberViewModel(initialDays) { 
 
    var self = this; 
 
    this.days = ko.observableArray(initialDays); 
 
    
 
    // Computed 3: Adds the `totalHours` for each day 
 
    this.totalHours = ko.pureComputed(function() { 
 
    return self.days().reduce(function(result, day) { 
 
     return result + day.totalHours(); 
 
    }, 0); 
 
    }); 
 
}; 
 

 
function TimeCardViewModel() { 
 
    var self = this; 
 
    this.teamMembers = ko.observableArray(); 
 

 
    // Computed 4: Adds the `totalHours` for each member 
 
    this.totalHours = ko.pureComputed(function() { 
 
    return self.teamMembers().reduce(function(result, member) { 
 
     return result + member.totalHours(); 
 
    }, 0); 
 
    }); 
 
};