敲除計算的可觀察對象上的 Foreach 綁定

Question

我有一個 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 ？

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

另外，請記住，您的日期屬性是可觀察的，因此： result[item.simulatorId]不起作用，或者更確切地說，不會產生預期的效果； 由於 observables 在技術上是函數，因此實際函數將用作鍵。 您需要解開 observable： result[item.simulatorId()] 。