計算淘汰賽中某些輸入的總和

Question

我的HTML代碼的一部分：

<!-- ko foreach: teamMembers -->
    <tr>
      <!-- ko foreach: days -->
      <td>
       <!-- ko foreach: $data -->
          <input  type="text" data-bind="value: number1">
          <input  type="text" data-bind="value: number2">
        <!-- /ko -->   
      </td>
      <!-- /ko -->
      <td>Total sum</td>
      <td>
        <button class="btn" data-bind='click: $root.addShift'>
          Add shift
        </button>
      </td>
    </tr>
    <!-- /ko -->

viewmodel代碼：

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表示位於days數組內的對象數組！ 每個對象都有一個number1屬性和一個number2屬性。

我想計算天內所有對象的這兩個數字的值的總和，這是一個數組的數組，並且在teamMembers中也有很多它們，這也是一個數組的數組。 因此，我希望對teamMembers的每個元素數組都執行此操作。 我該如何實現？ 我想addShift功能做到這一點，進去之和<td>Total sum</td>其中存在如果不描述以及整個問題的每teamMembers .Sorry的元素...

Answer 1

如果使用這些嵌套數據，則可能需要為每個元素創建視圖模型。

如果我正確了解您的結構，則有：

1. 時間卡，其中包含
2. 團隊成員，其中包含
3. 天，其中包含
4. 班次，其中包含
5. 兩個數字

如果為這些元素中的每一個定義特定的對象，則可以很好地了解計算值背后的邏輯。

例如：

• 班次的總totalHours數是1 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); }); };