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

Calculate the sum of some inputs in knockout

本文关键字：输入 淘汰赛 计算      更新时间：2023-09-26

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

视图模型代码:

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

days为array of arrays;后一种包含一个或多个对象。因此，在模板中，$data表示位于days数组内的对象数组!每个对象有一个number1属性和一个number2属性。

我想计算days内所有对象的值的总和，这是一个数组的数组，teamMembers内有很多数组，这也是一个数组的数组。因此，我希望对teamMembers的每个元素数组执行此操作。我怎样才能做到呢?我想要addShift函数做到这一点，并获得<td>Total sum</td>内的总和，该总和存在于teamMembers的每个元素。

如果您正在处理这些类型的嵌套数据，您可能希望为每个元素创建视图模型。

如果我没记错结构的话这里有:

  1. 时间卡，包含
  2. 团队成员，包含
  3. 天数，包含
  4. shift，包含
    5. 两个数

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

例如:

  • 一个位移的totalHours，是number1 + number2
  • 一天的totalHours，是每个班次的totalHours之和
  • 等。

使用

有两个好处:
  • ko.pureComputed自动重新计算总小时数
  • Array.prototype.reduce将数组中的所有值求和

我建议看一下下面的例子，感受一下如何构建组成TimeCard的元素。您可能不需要这么多的类级别，但这样更容易理解。

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

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

相关文章：