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

Question

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

因此，当用户将团队输入收藏时，每个团队都会根据排名获得积分。

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 支球队。因此，我只需要根据涉及的团队数量使用 RankScoring 集合中的 2 个项目。 如何对 RankScoring 集合进行数据绑定(bind)，以便用户可以输入排名分数？并且我欢迎提供更简单的方法来实现这一想法的建议。

**Teams:**
Red
Blue

**Scoring**
1st place - 10
2nd place - 5

Answer 1

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

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

Fiddle