淘汰赛计算 Observable 上的 Foreach 绑定答案

【问题标题】：Foreach Binding on a Knockout Computed Observable淘汰赛计算 Observable 上的 Foreach 绑定
【发布时间】：2020-05-30 17:35:23
【问题描述】：

我有一个 observableArray，scheduleDays，如下所示。它代表选定模拟器游戏的 1 周预约。

如果用户选择 2 个模拟器时间表查看，返回的视图模型如下所示：

this.scheduleDays = ko.observableArray([
  new ScheduleDay(1, 'Sunday', '02/09/2020', 1111, []),
  new ScheduleDay(4, 'Sunday', '02/09/2020', 2222, []),
  new ScheduleDay(2, 'Monday', '02/10/2020', 1111, []),
  new ScheduleDay(5, 'Monday', '02/10/2020', 2222, []),
  new ScheduleDay(3, 'Tuesday', '02/10/2020', 1111, []),
  new ScheduleDay(6, 'Tuesday', '02/10/2020', 2222, [])
]);

这会导致 UI 显示如下结果：

但我想要的是通过模拟器对数据进行排序，然后按日期排序：

显而易见的解决方案是对其进行排序，但出于学习目的，我想尝试通过按模拟器对视图模型进行分组来解决它。所以我添加了这个：

this.groupedScheduleDays = ko.computed(function() {
var result = {};
var original = self.scheduleDays();
console.log(original);

for (var i = 0; i < original.length; i++) {
  var item = original[i];
  result[item.simulatorId] = result[item.simulatorId] || [];
  result[item.simulatorId].push(item);
}

return result;
});

这产生了这个：

这正是我所期待的。到目前为止，这是我想出的https://jsfiddle.net/krob636/o48unhsg/58/。我的问题是如何在 foreach 中绑定groupedScheduleDays？

【问题讨论】：

如果修改计算函数以返回数组数组而不是对象，则可以使用嵌套的 foreach。

标签： javascript knockout.js knockout-3.0

【解决方案1】：

您可以使用Object.keys 来获取分组的项目，并使用嵌套的foreach：

<div data-bind="foreach: Object.keys(groupedScheduleDays())">
  <div data-bind="foreach: $parent.groupedScheduleDays()[$data]">
    <div class="row">
      <div class="col-2">
        <span data-bind="text: dayOfWeekName"></span>
      </div>
      <div class="col-2">
        <span data-bind="text: simulatorId"></span>
      </div>
    </div>
  </div>
</div>

小提琴：https://jsfiddle.net/thebluenile/L82emswo/

另外，请记住，您的 day 属性是可观察的，因此：result[item.simulatorId] 不起作用，或者更确切地说，不会产生预期的效果；由于 observables 在技术上是函数，因此实际函数将用作键。您需要解开 observable：result[item.simulatorId()]。

【讨论】：