javascript - 计算 knockout 中一些输入的总和

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 -->

View 模型代码:

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 属性。

我想计算 days 内所有对象的这两个数字的总和，这是一个数组数组，teamMembers 中有很多这样的对象这也是一个数组的数组。因此，我希望对 teamMembers 的每个元素数组都执行此操作。我怎样才能做到这一点？我想要 addShift 函数来执行此操作并获取 <td>Total sum</td> 内的总和它存在于团队成员的每个元素中。抱歉，如果没有很好地描述整个问题......

Answer 1

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

如果我正确地理解了你的结构，那么:

1. 考勤卡，其中包含
2. 团队成员，其中包含
3. 天数，其中包含
4. 类次，其中包含
5. 两个数字

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

例如:

• 轮类的totalHours为number1 + number2
• 一天的 totalHours 是每个类次的 totalHours 的总和
• 等等

使用后您将受益的两件事:

• ko.pureComputed自动重新计算总小时数
• Array.prototype.reduce对数组中的所有值求和

我建议您查看下面的示例，了解如何构建构成 TimeCard 的元素。您可能不需要这么多类(class)级别，但它更容易理解。

请注意，我没有输入任何代码来将 JSON 数据转换为新的 View 模型实例。如果您需要帮助，请在评论中告诉我。

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