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 表示位于天数组内的对象数组！每个对象都有 number1 属性和 number2 属性。

我想计算天内所有对象的这两个数值之和，这是一个数组数组，其中有很多 teamMembers 这也是一个数组数组。所以，我希望对 teamMembers 的每个元素数组都这样做。我怎么能实现这一目标？我想要 addShift 函数来实现这一点，并获得<td>Total sum</td>内的总和，该总和存在于 teamMembers 的每个元素。如果不能很好地描述整个问题，那么......

Answer 1

如果您正在使用这些嵌套数据，则可能需要为每个元素创建视图模型。

如果我的结构正确，那就是：

时间卡，其中包含
Teammembers，其中包含
天，包含
班次，包含
两个数字

如果为每个元素定义特定对象，您可以很好地概述计算值背后的逻辑。

例如：

班次的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);
  });
};

计算淘汰赛中某些输入的总和

1 个答案: