每个都有 2 个可观察的集合

for each with 2 observable collections

本文关键字:观察 集合      更新时间:2023-09-26

我有一个团队和排名得分集合要跟踪,比如说接力赛。

因此,当用户将团队输入集合时,每个团队将根据排名获得积分。

https://jsfiddle.net/2ae3dv8d/

<strong>Teams:</strong>
<!-- ko foreach: teams -->
<div>
    <input type="text" data-bind="value: name" />
</div>
<!-- /ko -->

function Team(name)
{
  var self = this;
  self.name = name'
}
function RankScoring(label, points){
  var self = this;
  self.label = label;
  self.points = points;
}
function AppViewModel()
{
  var self = this;
  self.teams = ko.observableArray([
    new Team('red'),
    new Team('blue')
  ]);
  self.rankscoring = ko.observableArray([
    new RankScoring('1st', ''),
    new RankScoring('2nd', ''),
    new RankScoring('3rd', ''),
  ]);
}

在这个特定示例中,假设游戏有 2 支球队。因此,我只需要根据所涉及的团队数量使用 RankScore 集合中的 2 个项目。如何对排名评分集合进行数据绑定,以便用户可以输入排名分数?我欢迎关于实现这个想法的更简单方法的建议。

**Teams:**
Red
Blue
**Scoring**
1st place - 10
2nd place - 5

添加一个计算以显示可用排名的文本框:

self.availablerankscoring = ko.computed(function(){
    return self.rankscoring().slice(0,self.teams().length);
});

为可用等级添加另一个 foreach:

<!-- ko foreach: availablerankscoring -->
<div>
    <label data-bind="text: label"></label><input type="text" data-bind="value: points" />
</div>
<!-- /ko -->

小提琴