[英]Foreach Binding on a Knockout Computed Observable
I have an observableArray, scheduleDays
, that looks like below.我有一个 observableArray,
scheduleDays
,如下所示。 It represents 1 week of appointments for a selected simulator game.它代表所选模拟器游戏的 1 周约会。
If the user selects 2 simulator schedules to view, the returned view model looks like this:如果用户选择 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, [])
]);
That causes the UI to display the results like this:这会导致 UI 显示如下结果:
But what I want is for the data to be sorted by simulator, then by date like this:但我想要的是按模拟器对数据进行排序,然后按这样的日期排序:
The obvious solution is sort it but for learning purposes, I wanted to try solving it by grouping the view models by simulator.显而易见的解决方案是对其进行排序,但出于学习目的,我想尝试通过按模拟器对视图模型进行分组来解决它。 So I added this:
所以我添加了这个:
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;
});
And that produced this:这产生了这个:
That's what I was expecting.这就是我所期待的。 Here is what I came up with so far https://jsfiddle.net/krob636/o48unhsg/58/ .
这是我到目前为止想到的https://jsfiddle.net/krob636/o48unhsg/58/ 。 My question is how can I bind
groupedScheduleDays
in a foreach?我的问题是如何在 foreach 中绑定
groupedScheduleDays
?
You can use Object.keys
to get the grouped items, and use a nested 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>
Fiddle: https://jsfiddle.net/thebluenile/L82emswo/小提琴: https : //jsfiddle.net/thebluenile/L82emswo/
Also, remember that your day properties are observables, so this: result[item.simulatorId]
doesn't work, or rather, won't have the desired effect;另外,请记住,您的日期属性是可观察的,因此:
result[item.simulatorId]
不起作用,或者更确切地说,不会产生预期的效果; since observables are technically functions, the actual function will be used as the key.由于 observables 在技术上是函数,因此实际函数将用作键。 You need to unwrap the observable:
result[item.simulatorId()]
.您需要解开 observable:
result[item.simulatorId()]
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.