温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Foreach Binding on a Knockout Computed Observable
javascript knockout.js knockout-3.0

javascript - 在淘汰赛计算的可观察的Foreach绑定

发布于 2020-05-04 02:33:19

我有一个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/我的问题是如何绑定groupedScheduleDaysforeach?

查看更多

提问者
KRob
被浏览
19
Brother Woodrow 2020-02-16 18:10

您可以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/

另外,请记住,您的日间属性是可观察的,所以这result[item.simulatorId]是行不通的,或者说,将不会达到预期的效果。由于可观察值在技术上是功能,因此实际功能将用作键。您需要打开可观察对象:result[item.simulatorId()]