javascript - 淘汰赛计算 Observable 上的 Foreach 绑定
问题描述
我有一个 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/。我的问题是如何groupedScheduleDays
在 foreach 中绑定?
解决方案
您可以使用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()]
。
推荐阅读
- c# - 是否可以在您的泛型类型中进行继承?
- html - 在 Wordpress 上使用 Bootstrap 将页脚保持在底部
- php - 如何使用 Laravel 发送带有 PDF 的电子邮件
- macos - 防止按钮在暗模式下呈现背景颜色?
- gradle - 如何以编程方式将项目添加到 Gradle 设置
- zapier - Zapier正则表达式:单词后匹配
- layout - 如何在 Apache Royale 的布局中将孩子居中?
- c++ - 我正在尝试在 C++ 中创建一个日志记录框架,但信息没有传递给记录器的子组件,我做错了什么?
- python - Python:创建数组列表
- android - 模拟器:警告:QXcbIntegration